Css -- 垂直与水平居中
本文轉載自:大漠博客
水平方向(未知寬度)
由分页组件为例
html
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</di>
css
ul {
padding: 0;
}
.pagination li {
line-height: 25px;
list-style: none;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
background: linear-gradient(#434345, #2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
background: linear-gradient(#f48b03, #c87100);
}
1. 给定宽度,利用 margin: auto
2. 利用 display: inline-block;
.pagination {
text-align: center; // 核心代码1
font-size: 0; //解决子元素为inline-block时两边多余的空白
}
ul {
padding: 0;
}
.pagination li {
display: inline-block; // 核心代码2
line-height: 25px;
list-style: none;
zoom: 1;
margin: 0 5px;
}
.pagination a {
text-decoration: none;
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
background: linear-gradient(#434345, #2f3032);
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
background: linear-gradient(#f48b03, #c87100);
}
优点:扩展性强。
缺点:会造成元素之间多余的空白部分。解决方法
:给父元素设置 fong-size: 0
,子元素重新设置大小
3. 浮动实现水平居中的方法
- 首先:整个容器
左浮动
.pagination {
float: left; // 核心
width: 100%;
overflow: hidden;
position: relative; //让子元素以他为移动
}
- 然后:在列表项
ul
上向右移动50%(left:50%;)
.pagination ul {
padding: 0;
clear: left;
float: left; // 让内容由内部元素大小撑起来
position: relative;
left: 50%;
}
- 最后:我们在
li
上也定义position:relative
属性,但其移动的方向和列表ul
动的方向刚好是反方向,而其移动的值保持一致
.pagination li {
position: relative;
right: 50%;
}
缺点:实现原理较复杂。
4. 绝对定位实现水平居中
- 常见知道宽度情况下:
.ele {
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
}
- 不知道宽度
.pagination {
position: relative;
height: 40px; /*最好设置高度,不然是沒有高度*/
}
.pagination ul {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
position: relative; /*注意,这里不能是absolute,大家懂的*/
right: 50%;
}
5. flex 实现水平居中方法
.pagination {
display: flex;
justify-content: center;
}
6. CSS3 的 fit-content 实现水平居中方法
.pagination ul {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
缺點: 兼容性还差点
垂直方向居中(所有方法皆不固定高度)
1. 方法1:利用 float 居中
html结构
<body>
<div id="flex">
<div></div>
</div>
</body>
css代码
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
text-align: center;
}
#flex {
display: inline-block;
vertical-align: middle;
}
body:after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
#flex div {
float: left;
width: 400px;
height: 400px;
background-color: #ff00ff;
}
2. 利用 display: table-cell 实现居中
<body>
<div class="main">
<div class="child"></div>
</div>
</body>
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
display: inline-table;
}
.main {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
background: green;
}
.child {
display: inline-block;
width: 200px;
height: 200px;
background: blue;
}
3. 使用 css3:transform
<body>
<div class="main">
<div class="child"></div>
</div>
</body>
body,html{
margin: 0px;
padding: 0px;
border: 0px;
height: 100%;
}
.main {
position: relative;
background: green;
height: 100%;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: blue;
}
缺点:兼容性 IE 10.0 / IE 9.0 -ms-
4. flex 弹性布局
.main{
display: flex;
justify-content: center;
align-items: center;
}
缺点:兼容性 IE 11.0 / IE 10.0 -ms-
5. 定位居中
<div class="main">
<div class="inner"></div>
</div>
.main{
background: #ccc;
height: 500px;
width: 500px;
position: relative;
}
.inner{
width: 100px;
height: 100px;
background: #f00;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}