前言:本文记录文本居中、水平居中、垂直居中、万能居中方法以及绝对居中方法,若有错误还请指正!
1.文本居中
+ height + line-height
:两者配合使用,垂直方向居中
text-align
:父级的 text-align,水平方向居中
注意:text-align:center ;只是将子元素里的内联元素居中 如果不是内联元素就要用到 margin: 0 auto;
<div class="word">
<p>优秀</p>
</div>
.word {
width: 100px;
height: 30px;
background-color: #e5e5e5;
text-align: center;
line-height: 30px;
font: size 14px;
}
优秀这两个字在
div
中妥妥居中。
2.水平居中
水平居中分两种情况
- 定宽块元素水平居中
定宽 + 块元素
<div class="wrap"></div>
.wrap {
width: 200px;
height: 200px;
border: 1 soild red;
margin: 0 auto; /*宽度必须给值*/
}
- 不定宽块元素水平居中
- 改变为行内元素,然后使用 text-align:center 处理,多用于不定项导航的 ul 的居中
<div>
<ul>
<li>11111</li>
<li>22222</li>
</ul>
</div>
.nav {text-align:center;}
.nav ul {display: inline;}
- 不定宽块元素水平居中
3.父元素浮动 left:50%;
同时要设置 position:relative
(给子元素相对定位一个参考)
子元素相对定位 position:relative;left:-50%;
<div class="parent">
<div class="son">子盒子</div>
</div>
.parent {
position: relative;
left: 50%;
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.parent .son {
position: relative;
left: -50%;
width: 150px;
height: 150px;
background-color: red;
}
4.垂直居中
垂直居中也分两种情况
- 块级元素垂直居中,子元素知道具体宽高
设置 top:50%,这个块元素的最上边为垂直居中的位置,但是这样整体的内容并不是垂直居中,所以要设置 margin-top: -2/父宽 px; //为高度的一半,这样这个块元素又相对于自身最上面向上又移动了自身的 50 因此就垂直居中了。
<style>
.parent {
/* 父元素 */
}
.parent .son {
position: absolute;
width: 100px;
height: 100px;
background: red;
top: 50%;
margin-top: -50%;
/* 为高度的一半 */
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
-
子元素不知道具体宽高
-
这种情况有三种方法:
- 借助 table 布局
- display:table-cell 实现法
- display:table-cell 主要针对多行文字内容的垂直居中对齐
- display:table-cell 此元素会作为一个表格单元格显示(类似
<td>
和<th>
)
div { display: table-cell; width: 200px; height: 200px; text-align: center; vertical-align: middle; border: 1px solid #F00; }
- 借助 translate 的 transform 属性
.parent{ position: relative; } .parent .son { position: absolute; top: 50%; transform: translateY(-50%); }
- 用 flex 布局
.parent { display: flex; flex-direction: column; justify-content: center; }
- 借助 table 布局
5.万能居中方法
首先移动子元素高度(宽度)的一半:left:50%;(top:50%;)
再移动父元素高度(宽度)的一半:margin-left:-宽/2;(margin-top:-高/2;)
前提:必须要知道子元素的宽高
<style>
.parent {
width: 200px;
height: 200px;
background-color: skyblue;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
效果效果:
6.绝对居中
<style>
.parent {
width: 200px;
height: 200px;
background-color: skyblue;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
效果如下:
总结: 居中的方法有很多,不局限以上这几种居中方法