网页布局的居中问题，如何让文本居中，如何让div居中，怎样让div居中？居中都有哪几种情况

﹏ヽ暗。殇╰゛Y 2022-05-26 04:39 250阅读 0赞

关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：

1、文本，图片等内联元素的水平居中。text-align:center

2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto

3、不定宽块状元素水平居中

方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto

方案二：将子元素转换为内联块状元素，给父元素设置text-align:center;

4、不定宽高的元素在屏幕窗口水平垂直都居中

5、不定宽高元素在父元素中水平垂直都居中

\-----------------------------以下为详细内容-------------------------------------------------

1、文本，图片等内联元素的水平居中。

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。

如：

<style type="text/css">
    .imgBox{
     border: 1px solid black;
     text-align: center;
    }
    h1{
     border: 1px solid black;
     text-align: center;
    }
    .menu{
     border: 1px solid black;
     text-align: center;
    }
    form{
     border: 1px solid black;
     text-align: center;
    }
    </style>
    </head>
    <body>
    	
    	<div class="imgBox">
    		<img src="img/pic2.png"/>
    		<span style="background-color: red;">我是span</span>
    	</div>
    	
    	<h1>我是标题</h1>
    	
    	<div class="menu">
    		<a href="#">新闻资讯</a>
    		<a href="#">课程介绍</a>
    		<a href="#">关于我们</a>
    		<a href="#">在线留言</a>
    		<a href="#">师资力量</a>
    		<a href="#">联系我们</a>
    	</div>
    	<form action="">
    		<input type="text"/>
    		<input type="submit" value="百度一下"/>
    	</form>
    </body>
    </html>

2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto

<style type="text/css">
    body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
    	margin: 0;
    	padding: 0;
    }
    .header{
    	width: 100%;
    	height: 100px;
    	background: black;
    }
    .header_con{
    	width: 1000px;
    	height: 100px;
    	background: red;
    	margin:0 auto;
    }
    </style>
    </head>
    <body>
    
    	<div class="header">
    		<div class="header_con"></div>
    	</div>
    
    </body>

3、不定宽块状元素水平居中

方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto

<style type="text/css">
    
    .box1{
    	display: table;
    	margin:0 auto;
    }
    .box1 a{
    	display: block;
    	float: left;
    	padding:3px 5px;
    }
    
    </style>
    </head>
    <body>
    
    
    
    	<div class="box box1">
    		<a href="#">首页1</a>
    		<a href="#">上一页</a>
    		<a href="#">1</a>
    		<a href="#">2</a>
    		<a href="#">3</a>
    		<a href="#">4</a>
    		<a href="#">5</a>
    		<a href="#">下一页</a>
    		<a href="#">尾页</a>
    	</div>
    </body>
    </html>

方案二：

将子元素转换为内联块状元素，给父元素设置text-align:center;

<style type="text/css">
    .box2{
    	margin-top: 50px;
    	text-align: center;
    }
    
    .box2 a{
    	padding:3px 5px;
    	border: 1px solid blue;
    	margin:0 3px;
    	text-decoration: none;
    	color: #333;
    	font-size: 12px;
    	display: inline-block;
    }
    </style>
    </head>
    <body>
    
    
    
       <div class="box box2">
        	<a href="#">首页</a><a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">下一页</a><a href="#">尾页</a>
        </div>
    </body>
    </html>

4、不定宽高的元素在屏幕窗口水平垂直都居中

<style type="text/css">
    /*body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
    	margin: 0;
    	padding: 0;
    }*/
    
    /*方案一：屏幕窗口的居中，使用固定定位，将四个方向的值全部设置为0，然后设置margin为auto，自动计算上下左右的margin值*/
    .imgs{
    	position: fixed;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    	margin:auto;
    }
    
    
    /*方案二*/
    /*使用弹性盒的方式实现，首先给html，body设置宽度为100%，然后给body设置主轴，交叉轴对齐方式为center*/
    /*html,body{
    	height: 100%;
    }
    body{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }*/
    
    /*方案三*/
    /*使用css3中transform变形中的translate来实现水平垂直都居中*/
    /*.imgs{
    	position: fixed;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }*/
    </style>
    </head>
    <body>
    	<img class="imgs" src="img/pic2.png"/>
    </body>
    </html>

5、不定宽高元素在父元素中水平垂直都居中

<style type="text/css">
    
    /*.father{
    	width: 800px;
    	height: 500px;
    	background: gray;
    	position: relative;
    }*/
    /*方案一：给父元素相对定位，给子元素绝对定位*/
    /*.imgs{
    	position: absolute;
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	margin: auto;
    }*/
    
    /*方案二：使用css3的translate实现*/
    
    /*.imgs{
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform:translate(-50%,-50%);
    }*/
    
    /*方案三：非父元素设置table-cell,将父元素转换为表格单元格形式*/
    
    /*.father{
    	width: 800px;
    	height: 500px;
    	background: gray;
    	display: table-cell;
    	text-align: center;
    	vertical-align: middle;
    }
    .imgs{
    	vertical-align: bottom;
    }*/
    
    /*方案四：给img添加一个参照物span，并设置高度为100%*/
    /*.father{
    	width: 800px;
    	height: 500px;
    	background: gray;
    	text-align: center;
    }
    .father span{
    	display: inline-block;
    	width: 0;
    	height: 100%;
    	vertical-align: middle;
    }
    .imgs{
    	vertical-align: middle;
    }*/
    
    
    /*方案五：使用弹性盒的方式实现*/
    .father{
    	width: 800px;
    	height: 500px;
    	background: gray;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    </style>
    </head>
    <body>
    	<div class="father">
    		<img class="imgs" src="img/pic2.png"/>
    		
    	</div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关使用table-cell让div居中

父元素设置display:table-cell，并设置vertical-align:middle 然后设置子元素的margin-left和margin-right为a...

朱雀/ 2024年04月17日 05:53/ 0 赞/ 66 阅读

相关 div居中显示(div在页面居中显示)

如何使div中div的内容居中显示 ![Image 1][] 超链接其中是为了让超链接换行 ; padding-top:\\px;是为了垂直居中，具体是多少

冷不防/ 2023年09月26日 11:56/ 0 赞/ 83 阅读

相关 CSS中怎么让DIV居中

CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌

分手后的思念是犯贱/ 2022年08月26日 15:19/ 0 赞/ 270 阅读

相关如何让div中的文字居中

首先定义一个类名为box的div容器，直接在其内部添加文字以下代码适用单行文字在容器中居中对齐 .box\{ height:50px; width:50px

绝地灬酷狼/ 2022年07月20日 12:13/ 0 赞/ 326 阅读

相关 DIV+CSS如何让文字垂直居中？

CSS网页布局DIV水平居中的各种方法一、单行垂直居中如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它

不念不忘少年蓝@/ 2022年07月16日 11:47/ 0 赞/ 289 阅读

相关网页布局的居中问题，如何让文本居中，如何让div居中，怎样让div居中？居中都有哪几种情况

关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况： 1、文本，图片等内联元素的水平居中。text-align:center 2、定宽的块状元素在浏览器窗口或

﹏ヽ暗。殇╰゛Y/ 2022年05月26日 04:39/ 0 赞/ 251 阅读

相关 HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

HTML+CSS技术学习 [https://www.itkc8.com][https_www.itkc8.com] 最近写网页经常需要将div在屏幕中居中显示，遂记录下几个

向右看齐/ 2022年04月22日 03:36/ 0 赞/ 326 阅读

相关 DIV+CSS如何让文字垂直居中

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里

Bertha 。/ 2021年11月29日 05:54/ 0 赞/ 471 阅读

相关 flex布局怎样让div居中

用flex布局可以让div或者其他元素居中请看代码可以设置div的display属性为flex，然后设置align-items：center; justify-

痛定思痛。/ 2021年10月19日 05:26/ 0 赞/ 1017 阅读

相关 html css怎样让div居中

很多时候我们都需要div居中用css3的transform属性即可让div居中如代码所示先设置子元素的margin-top和margin-left为50%

た入场券/ 2021年10月19日 05:24/ 0 赞/ 387 阅读