在使用CSS对页面进行样式布局的时候，居中是我们最经常用到的布局之一，而居中布局又分为水平居中和垂直居中。
本文将要给大家介绍CSS居中布局的几种常用方法。
一、水平居中
- 行内元素及类行内元素居中
使用 text-align: center; 令块级父容器中的行内元素居中.
HTML:
<body>
<div class="father-div">
<p class="inline-center">
inline/inline-block/inline-table/inline-flex
</p>
</div>
</body>
CSS:
.father-div {
text-align: center;
}
.inline-center {
background-color: red;
}
需要注意的是 text-align: center; 这种方法只能作用于 inline/inline-block/inline-table/inline-flex 等类型的元素
- 块级元素使用
margin: 0 auto;
HTML:
<body>
<div class="father-div">
<div class="center">
</div>
</div>
</body>
CSS:
.center {
background-color: red;
width: 100px;
height: 100px;
margin: 0 auto;
}
对块级元素使用 margin: 0 auto; 使其水平居中需要注意设置居中元素的宽度，高度可以直接设置也可通过内容撑开。
- 使用position定位
使用position对元素进行居中需要设置居中元素的宽度，同时对其父元素设置 position: relative;
HTML:
<body>
<div class="father-div">
<div class="center">
</div>
</div>
</body>
CSS:
.father-div {
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -50px;
}
此种方法需要在父元素设置为 position: relative; 的情况下，将居中元素设置为 position: absolute; ，同时需要为居中元素设置宽度，随后设置 left: -50% ，最后添加一个 margin-left ，值为负的宽度的一半。
- flex居中
justify-content:center; 主轴居中。
HTML:
<body>
<div class="father-div">
<div class="center">
</div>
</div>
</body>
CSS:
.father-div {
display: flex;
justify-content: center;
}
.center {
width: 100px;
height: 100px;
background-color: red;
}
另外，使用flex布局使元素居中可以不设置元素的宽高，可以用内容将其撑开。
- 使用transform
HTML:
<body>
<div class="father-div">
<div class="center">
</div>
</div>
</body>
CSS:
.father-div {
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
float: left;
transform: translateX(-50%);
}
使用transform一样不必设置居中元素的宽高。
二、垂直居中
- 行内元素及类行内元素的垂直居中
对于父元素高度固定且单行的行内元素及类行内元素垂直居中，最基本方法是将其line-height设置为与height相同即可
HTML:
<body>
<div class="father-div">
<p class="center">
centercentercentercentercentercentercentercentercentercentercenter
</p>
</div>
</body>
CSS:
.father-div {
height: 100px;
background-color: red;
}
.center {
line-height: 100px;
}
- 使用
vertical-align
此方法需要为居中元素的父元素添加display: table;，并为居中元素添加display: table-cell;，随后设置其vertical-align属性的值为 middle。
HTML:
<body>
<div class="father-div">
<p class="center">
centercentercentercentercentercentercentercentercentercentercenter
</p>
</div>
</body>
CSS:
.father-div {
height: 100px;
background-color: red;
display: table;
}
.center {
display: table-cell;
vertical-align: middle;
}
- 利用position定位
同水平居中相似，在使元素垂直居中的方法中一样可以使用绝对定位。
HTML:
<body>
<div class="father-div">
<div class="center">
</div>
</div>
</body>
CSS:
.father-div {
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 50%;
margin-top: -50px;
}
- 使用transform
HTML:
<body>
<div class="father-div">
<div class="center">
transformtransformtransformtransform
</div>
</div>
</body>
CSS:
.father-div {
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.center {
background-color: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
使用CSS3的transform属性允许开发者不设置居中元素的宽高
三、水平垂直居中
- 绝对定位居中
上文水平居中的方法中我们讲到 margin:0 auto 可以实现水平居中，现在我们使用 margin:auto 一样可以实现水平垂直居中。
HTML:
<body>
<div class='absolute-center'>
</div>
</body>
CSS:
.absolute-center {
background-color: red;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
}
这样一来我们就可以实现 .absolute-center 的水平垂直居中了，但是使用绝对定位居中有以下几点需要注意：
- 元素必须声明高度，可以使用固定高度如：
px、em也可使用百分比高度或min-/max-高度。 - 最好设置
overflow:hidden防止内容溢出。 - 在Windows Phone设备上不起作用。
- 在IE-8以下的浏览器中不支持。
- 使用position定位
在元素的水平居中和垂直居中的内容中我们都提到了使用position定位来实现元素的居中，现在我们将两者结合起来就可以实现水平垂直中。
HTML:
<body>
<div class="father-div">
<div class="center">
</div>
</div>
</body>
CSS:
.father-div {
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
- 使用transform
同样，我们使用CSS3的transform属性也可以实现元素的水平垂直居中。
HTML:
<body>
<div class="father-div">
<div class="center">
</div>
</div>
</body>
CSS:
.father-div {
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.center {
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
使用transform属性可以利用内容撑开元素从而避免对元素设置确定的宽高。
以上就是我所要介绍的几种CSS居中的常用方法，可以在不同的情况下灵活选用，以保证达到最好的效果。
网友评论