概述
水平居中总结-不定宽块状元素方法
- 加入 table 标签
元素外加一个 table 标签 ( 包括<tbody>、<tr>、<td>)，为这个 table 设置“左右 margin 居中“。 - 设置
display：inline-block方法
改变块级元素的 display 为 inline-block 类型，然后设置父元素text-align:center来实现居中效果。 flex
.flex-center { display: flex; justify-content: center; }- 设置 position:relative 和 left:50%;
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下：
<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><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;}
</style>垂直居中-父元素高度确定的单行文本（行间元素）
- 设置父元素的 height 和 子元素的line-height
- 设置父元素的padding-top等于padding-bottom
垂直居中-父元素高度确定的多行文本（类行间元素）
- 插入 table (包括tbody、tr、td)标签
默认td元素具有vertical-align：middle
[这个样式只有在父元素为 td 或 th 时，才会生效] 设置父元素
display: table;,
设置比如p元素包括的多行文本为display: table-cell;vertical-align：middle;
[ IE6、7 并不支持这个样式]flex
设置父元素：
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}垂直居中-父元素高度不确定的多行文本（类行间元素）
- ghost element
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>垂直居中-高度确定的块级元素
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}垂直居中-高度不确定的块级元素
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}垂直居中-块级元素
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}水平垂直居中-元素宽高确定
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;//包括padding
}水平垂直居中-元素宽高不确定
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);//此处的-50%是基于当前元素的宽和高
}水平垂直居中-flex
.parent {
display: flex;
justify-content: center;
align-items: center;
}延伸阅读：
Centering in CSS: A Complete Guide：完整讨论了不同情况下的居中方案
Get HTML & CSS Tips In Your Inbox：有人写了一个作弊工具生成居中代码
HTML和CSS高级指南之二——定位详解：大漠老师手把手教你，这次彻底搞懂定位问题
更多CSS居中方法
学习CSS布局
最后
以上就是靓丽冰淇淋为你收集整理的CSS样式--居中设置的全部内容，希望文章能够帮你解决CSS样式--居中设置所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复