1、水平居中包括行内元素还是块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素。
1.1、行内元素的水平居中,像文本、图片等行内元素,水平居中是通过给父元素设置 text-align:center 来实现的。
如下:
<style>
div{
border:1px solid red;
margin:20px;
}
.txtCenter{
text-align:center;
}
.imgCenter{
text-align: center;
}
</style>
</head>
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>
1.2、定长的块级元素居中。(定宽块状元素:块状元素的宽度width为固定值)满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
如下:
<style>
div{
border:1px solid red;
width:200px;
margin:20px auto;
}
</style>
</head>
<body>
<div>我是定宽块状元素,我要水平居中显示。</div>
1.3、不定宽的块级元素居中。
1.3.1 第一种方式是,使用table标签包裹起来,table标签有自动居中的功能,
如下:两种定义table标签的方式。
<style>
table{
margin: 0 auto;
}
.wrap{
background: #ccc;
/** 设置为table显示也可以实现table标签 */
display: table;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<div class="wrap">
设置我所在的div容器水平居中
</div>
1.3.2、第二种不定长的块级元素设置居中使用display将块级元素变成行级元素,然后在父元素中设置text-align: center,来实现居中。如下
<style>
.container{text-align:center;background: red;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
1.3.3、第三种不定长的块级元素居中,通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。如下:
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
.wrap{
float: left;
position: relative;
left: 50%;
}
.wrap-center{
background:#ccc;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<br/><br/>
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>