CSS-居中
2017-08-12 本文已影响53人
晓风残月1994
CSS-居中
一. 水平居中
1. 行内元素水平居中
使用text-align属性，对行内元素定义居中
<style>
.box {
border: 1px solid red;
text-align: center;
margin: 20px;
}
.box .btn {
margin: 0 10px;
}
.btn {
display: inline-block;
padding: 3px 5px;
background: green;
color: #fff;
border-radius: 3px;
text-decoration: none;
}
</style>
<body>
<div class="box">
hello Nicolas ZHAO SI
</div>
<div class="box">
<a href="" class="btn">点我</a>
<a href="" class="btn">点我</a>
</div>
</body>
行内元素水平居中
2. 块级元素水平居中
块级元素默认就会独占横向的空间，因此一般说的块级元素的居中，是定义了宽度的前提下。
/*
如下所示： 再块级元素给定宽度的前提下，设置左右margin为auto自动即可，
上下marigin随意
另外由于内部有个行内块级元素按钮，因此设置text-align行内元素居中
*/
.box2 {
border: 1px solid black;
width: 500px;
margin: 0 auto;
text-align: center;
}
<div class="box2">
<a href="" class="btn">点我</a>
</div>
块级元素水平居中
二. 垂直居中
1. 段落文字垂直居中
一般不要把父容器的高度固定死，由里面的内容来绝对撑开，这样可以做到动态的居中。
/* 只需要给父容器上下设置固定padding即可 */
<style>
.box {
border: 1px solid red;
text-align: center;
padding: 30px;
}
</style>
<body>
<div class="box">
<h1>Hello fantastic baby!</h1>
<h1>Hello fantastic baby!</h1>
<h1>Hello fantastic baby!</h1>
</div>
</body>
段落文字垂直居中
2. 单行文字、按钮、icon的垂直居中
如下所示，如果对按钮定义了高度，而没有指定行高，则可能会导致按钮文字不会垂直居中，此时，你可以对单行文本设置行高=高度，从而使容器在任意高度下，内部文字都是垂直居中的。
<style>
.box {
border: 1px solid red;
text-align: center;
padding: 20px;
}
.btn {
width: 70px;
height: 50px;
line-height: 50px;
display: inline-block;
border: 1px solid black;
color: #fff;
background: #666;
text-decoration: none;
}
</style>
按钮文本的垂直居中
三. 绝对居中
1. 满屏
这种居中方式，适合做首页首屏，是一种全屏的方式，随着窗口大小的调整会自适应（图中灰色背景）
<style>
/* 为全屏的容器box以及其上层所有父级元素设置高度100%，宽度自适应 */
body,html {
height: 100%;
margin: 0;
}
/*
这里的box容器为了达到全屏效果，也可以不定义高度为100%，而是采用如下方案，使用绝对定位，同时距离四个边界距离为0,此法可以用来做屏幕弹框
.box {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
*/
.box {
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.box1 {
width: 300px;
height: 200px;
background: deepskyblue;
border: 1px solid;
text-align: center;
}
</style>
<body>
<div class="box">
<div class="box1">
<h1>hello</h1>
<p>欢迎来到召唤师峡谷</p>
</div>
</div>
</body>
背景满屏
2. 具有固定宽高的容器绝对居中
你一定留意到了，上面实现全屏的例子，还有一个蓝色的容器，拥有一定的宽高，而又不是全屏，该如何居中呢？别着急，往下看：
/* 事实上，你只需要对这个蓝色容器，也使用绝对定位，然后距离左边50%，距离上边50%。
但是在定位中用来计算距离的点是容器的左上角，所以还需要分别添加负margin，其为容器高度的一半，
如果你不理解， 没关系，你先试一下就知道为什么了*/
.box1 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
width: 300px;
height: 200px;
background: deepskyblue;
border: 1px solid;
text-align: center;
}
使用了绝对定位，但是没有添加负margin之前
使用了绝对定位，并且添加了负margin之后
3. 非固定宽高的容器绝对居中
这时候有人问了，如果想要居中的容器，不设置固定宽高，而是按照需求，由内部的元素自由的撑开呢？
问得好！如果没有了固定宽高，那么你就不能再使用负margin来做绝对定位后的调整了，因为你的内容是不固定，日后可能是变化的，怎么办？
这时候你需要学习一个CSS3的属性，叫做transform，使用方法如下：
transform: translate(-50%,-50%);
用这个属性代替被放弃的负margin即可，translate()内部的两个属性值，分别代表水平和垂直方向的位置偏移量，右→，下↓为正，因此transform: translate(-50%,-50%)表示容器向左和向上分别偏移自身宽和高各50%的距离。
4. 伪元素实现非固定宽高的水平垂直居中
这种方法，元素宽高随意，采用前或后添加伪元素，使用对齐的属性，然后另伪元素“消失”即可。
<style>
/* 定义父容器固定高度，并且内容水平居中 */
.dad {
height: 400px;
border: 1px solid;
text-align: center;
}
/* 定义容器内伪元素高度为动态100%，并且展现方式为行内块级，同时中部垂直对齐 */
.dad::before {
content: '';
height: 100%;
display: inline-block;
border: 1px solid;
vertical-align: middle;
}
/* 前后两个伪元素一个就可以，这是为了形象演示，加了两个 */
.dad::after {
content: '';
height: 100%;
display: inline-block;
border: 1px solid;
vertical-align: middle;
}
/* 要居中的元素同样定义行内块级，并且中部垂直对齐 */
.baby {
display: inline-block;
border: 1px solid red;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="dad">
<div class="baby">我要居中！</div>
</div>
</body>
借用伪元素实现垂直水平居中
总结：
关于居中方式有十几种不同的方式，分别有自己的使用场景，选择适当的居中方式很关键，这个一方面看前人总结的经验，多google几篇不同作者的文章，对比着看，另一方面只有靠自己在学习工作中不断的摸索总结，形成自己的经验。
