👉👉👉传送门：前端开发各种居中归纳
对比原图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
body,p{ /*去除body和p内外边距*/
padding: 0px;
margin: 0px;
}
html,body{ /*定义body全屏*/
width: 100%;
height: 100%;
}
.box1{
background-color: #99FFFF;
width: 100%;
height: 100%;
}
.box1 span{
background-color: #99FF33;
}
.box1 div{
background-color: #9900CC;
}
.box1 p{
background-color: #FF6666;
}
</style>
</head>
<body>
<div class="box1">
<span>我是span，我要居中</span>
<span>我是span，我要居中</span>
<div>我是div，我要居中</div>
<p>我是p，我要居中</p>
</div>
</body>
</html>
单/多个行内元素的水平居中
注：如果想要行内和块级一同并一行居中，那就块转行内或者转行内块，我这里是测试行内和块。块转行内：
display: inline;
块转行内块：
display: inline-block
- 在父元素添加
text-align: center;（文本居中）CSS样式，来使里面的内容居中。
【如果希望单标签单行居中，那就每个标签外套个容器，我这里只是解释居中显示的形式】
使用div标签属性（此方法已不用，被CSS样式取代）align="center"来使里面的内容居中。
【如果希望单标签单行居中，那就每个标签外套个容器，我这里只是解释居中显示的形式】
💦💦💦注意区分：
- 将块级变为行内
display: inline;，再用text-align: center;来居中。
【如果希望单标签单行居中，那就每个标签外套个容器，我这里只是解释居中显示的形式】
当然，也可以设置为行内块级display: inline-block;
【如果希望单标签单行居中，那就每个标签外套个容器，我这里只是解释居中显示的形式】
- （定宽块级元素）必须都为块级元素，且设宽高，添加
margin: 0 auto;，实现水平居中。
【这个是将子元素移动到父元素水平中间，子元素内容不变】
ps：
①display: block;，行内转块；
②这里只是将块居中，里面的文本内容还是得通过text-align: center;来实现水平居中。
③margin: 0 auto;只有左右值auto是一定的，上下值可以根据需求设置。
- 加入<table>，给table设置
margin:0 auto;来居中，类似上面（此时table里面的内容，均水平垂直居中）。
- 改变子元素的属性为表单属性
display: table;，加上margin: 0 auto;，但是兼容性不好。
position: absolute; left: 50%;+margin-left: -(width/2)px;不用float的错位居中（此方法不适用于文本内容，适用于图片/盒子/容器等的居中，文本内容center居中）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素水平居中</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
}
html,body{ /*定义body全屏*/
width: 100%;
height: 100%;
}
.box1{
background-color: yellow;
width: 300px;
height: 300px;
position: relative;
}
.test{
background-color: red;
width: 150px;
height: 150px;
position: absolute;
left: 50%;
margin-left: -75px; /* 值=宽/2 */
}
</style>
</head>
<body>
<div class="box1">
<div class="test"></div>
</div>
</body>
</html>
- float脱离文档流的错位居中
（下面只是介绍方法，但是例子还没有达到真正的居中，因为，这个方法是作用于该盒子所有内容，而不是单个，也就是说，要用此方法居中某个内容，外面得套个容器。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素水平居中</title>
<style type="text/css">
body,p{ /*去除body和p内外边距*/
padding: 0px;
margin: 0px;
}
html,body{ /*定义body全屏*/
width: 100%;
height: 100%;
}
.box1{
background-color: #99FFFF;
height: 200px;
float: left;
position: relative;
left: 50%;
}
.box1 span{
background-color: #99FF33;
}
.box1 div{
background-color: #9900CC;
}
.box1 p{
background-color: #FF6666;
}
.box1 div,.box1 p,.box1 span{
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="box1">
<span>我是span，我要居中</span>
<span>我是span，我要居中</span>
<div>我是div，我要居中</div>
<p>我是p，我要居中</p>
</div>
</body>
</html>
由float浮动居中引起的问题：
①上面尝试了单独标签或者同样内容使用float错位居中，那么然后我就开始尝试将所有标签都居中，希望达到上面其他方法的效果。
②然后，第一步开始为每个元素套上一个父元素盒子，否则搞不了：
<body>
<div class="box1"><span>我是span，我要居中1</span></div>
<div class="box2"><span>我是span，我要居中2</span></div>
<div class="box3"><div>我是div，我要居中</div></div>
<div class="box4"><p>我是p，我要居中</p></div>
</body>
③接着从box1开始，按上面步骤居中，然后就发现问题：
④为何出现这种情况先不管，把剩下的box4完成第⑤步解释。
⑤这是因为使用float浮动容易影响后面（下面的div）元素布局，造成页面混乱，所以通常只要用float，那么下面的元素，必须加上clear: both;清除，来消除浮动带来的影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素水平居中</title>
<style type="text/css">
body,p{ /*去除body和p内外边距*/
padding: 0px;
margin: 0px;
}
html,body{ /*定义body全屏*/
width: 100%;
height: 100%;
}
.box1{
background-color: #99FFFF;
float: left;
position: relative;
left: 50%;
clear: both;
}
.box2{
background-color: #99FFFF;
float: left;
position: relative;
left: 50%;
clear: both;
}
.box3{
background-color: #99FFFF;
float: left;
position: relative;
left: 50%;
clear: both;
}
.box4{
background-color: #99FFFF;
float: left;
position: relative;
left: 50%;
clear: both;
}
.box1 span,.box2 span{
background-color: #99FF33;
}
.box3 div{
background-color: #9900CC;
}
.box4 p{
background-color: #FF6666;
}
.box1 span,.box2 span,.box3 div,.box4 p{
position: relative;
left: -50%;
</style>
</head>
<body>
<div class="box1"><span>我是span，我要居中1</span></div>
<div class="box2"><span>我是span，我要居中2</span></div>
<div class="box3"><div>我是div，我要居中</div></div>
<div class="box4"><p>我是p，我要居中</p></div>
</body>
</html>
BTW：当然，float不单单会给后面的元素带来影响，还会产生高度塌陷问题。
-
①float布局导致页面混乱
-
②阮一峰的网络日志——浮动元素容器的clearing问题
-
③说一下zoom:1的原理，万一被问到呢？
-
④float属性使用后导致元素错位或塌陷的原因及解决方案
-
⑤CSS 清除浮动
👇👇👇更多方法详情已经知识点：
万能的清除浮动技术：（增加一个额外的类似于“clearfix”的类。这个类使用如下 css:）
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
-
另：absolute+float是在子元素不定宽时用的小技巧，而定宽时，则常用的是absolute left/right（正） + margin-left/right（负*宽/2）来实现错误居中，不需要float
- 如：
- ①已知子元素宽200px;想要在body（浏览器窗口）里水平居中；
- ②则先给外包装（父元素）absolute+left；【body自带定位属性，不需要relative】
- ③然后，子元素的margin-left=-(width/2)=-100px;
body {
overflow: hidden; /*隐藏错位带来的多余空间*/
}
.wrap {
width:500px;
height: 500px;
margin: 0 auto;
background: pink;
position: absolute;
left: 50%;
}
.content {
width: 200px;
height: 200px;
background: red;
margin-left: -100px;
}
单/多个行内元素的垂直居中
- （父元素高度确定）单行文本，给子元素设置行高等于父元素的高（我上一篇博文就讲过）
- （父元素高度确定）使用<table>表单标签代替<div>，设置<table>的高，利用<td>自带的
vertical-align: middle;属性来垂直居中。
缺点：无意义标签太多。
另一种：直接给<div>里面的内容套<table>，设置<td>的高。
- （父元素高度确定）将容器（块元素）改为表单表格属性
display: table-cell;，但破坏原有块级元素的性质。
👉👉👉传送门：table-cell width和height的100%
- （行内块元素）通过给子元素设置
vertical-align: middle;来垂直居中。
-
误区注意：
- ①并不是给子元素设置此属性就能垂直居中；
- ②并不是子元素相对于父元素进行垂直居中；
- ③它是相对于同辈元素的高来进行垂直居中的，在垂直方向，会移动到同辈元素的高的中间位置。
-
④它所参照的同辈元素，必须也添加
vertical-align: middle; -
⑤它本身如果内容简短不需要分行，则
display: inline;就行了，但是参考的同辈，必须是display: inline-block;因为需要和垂直居中内容共享一行才能起到参考作用，且需要设高，所以必须为行内块级元素。如果内容太多，则不妨都设置为display: inline-block;。 - ⑥总结的一点：就是给它一个空内容的同辈元素，并且将空内容标签的高设置跟父元素相等，让它参考来达到居中效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素垂直居中</title>
<style type="text/css">
body,p{ /*去除body和p内外边距*/
padding: 0px;
margin: 0px;
}
html,body{ /*定义body全屏*/
width: 100%;
height: 100%;
}
.box1{
background-color: #99FFFF;
width: 100%;
height: 100%;
}
.span1,.span2{
background-color: #99FF33;
}
.div1{
background-color: #9900CC;
}
.p1{
background-color: #FF6666;
}
.span1,.span2,.div1,.p1{
vertical-align: middle;
display: inline-block;
}
.help{
width: 0;
height: 100px;
vertical-align: middle;
display: inline-block;
border: 2px solid #000000;
}
</style>
</head>
<body>
<div class="box1">
<div><span class="span1">我是span，我要居中</span><div class="help"></div></div>
<div><span class="span2">我是span，我要居中</span><div class="help"></div></div>
<div><div class="div1">我是div，我要居中</div><div class="help"></div></div>
<div><p class="p1">我是p，我要居中</p><div class="help"></div></div>
</div>
</body>
</html>
👇单独的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vertical-align: middle;练习</title>
<style type="text/css">
body,p{ /*去除body和p内外边距*/
padding: 0px;
margin: 0px;
}
html,body{ /*定义body全屏*/
width: 100%;
height: 100%;
}
.box1{
background-color: #99FFFF;
display: inline-block;
width: 300px;
height: 150px;
}
.test{
background-color: #99FF33;
display: inline-block;
vertical-align: middle;
}
.help{
width: 0;
height: 100%;
border: 1px solid #000000;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">
<span class="test">我是span，我要居中</span>
<div class="help"></div>
</div>
</body>
</html>
✅水平且垂直居中✅
- 单标签单行内容的垂直与居中（一）
-
①父元素设置
text-align: center;使文本内容水平居中； -
②子元素设置
line-height: 父height;行高等于父元素高，来使子元素垂直居中。
- 单标签单行内容的垂直与居中（二）
- ①插入table标签
-
②tableCSS属性设置
margin: 0 auto;使文本内容水平居中； - ③tdCSS属性设置高等于父元素，本身自带垂直居中，但是高跟父元素大才能实现在父元素内垂直居中。
- ④注意：td存在默认间距，且里内容行高也会撑开td高度，影响精确度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本内容的垂直与水平居中</title>
<style type="text/css">
body,td{ /*td存在默认边距*/
padding: 0;
margin: 0;
}
.box1,.box2{
width: 200px;
height: 200px;
}
.box1{
background-color: green;
}
.box2{
background-color: yellow;
}
.Aa,.Bb{
}
table{
margin: 0 auto;
}
table td{ /*内容行高会影响精确度*/
height: 200px;
line-height: 100%;
}
</style>
</head>
<body>
<div class="box1">
<table><tr><td><div class="Aa">块标签内的内容居中</div></td></tr></table>
</div>
<div class="box2">
<table><tr><td><span class="Bb">行内标签的内容居中</span></td></tr></table>
</div>
</body>
</html>
- 单标签单行内容的垂直与居中（三）【IE6、IE7不兼容】
- ①改变父元素和子元素的属性，为表单和表单单元格；
- ②父元素center水平居中；
- ③子元素middle垂直居中。
- ④总的来说，就是<table>的做法，只是不需要插入多余的标签而已（不同的是，display:table;的水平居中需要center，table是设置margin）。
- 单标签单行内容的垂直与居中（四）
ps：行高只适用于文本内容，块状居中请看（五）。
- 单标签单行内容的垂直与居中（五）
ps：因为并不是所有居中都是文本形式的，要考虑所包裹的元素居中，所以就可以用这个了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本内容的垂直与水平居中</title>
<style type="text/css">
body,td{
padding: 0;
margin: 0;
}
.box1,.box2{
width: 200px;
height: 200px;
}
.box1{
background-color: green;
}
.box2{
background-color: yellow;
}
.Aa,.Bb{
position: relative;
right: -50%;
display: inline-block;
vertical-align: middle;
}
.wrap{
float: right;
position: relative;
right: 50%;
}
.help{
width: 0;
height: 200px;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box1">
<div class="wrap"><div class="Aa">块标签内的内容居中</div><div class="help"></div></div>
</div>
<div class="box2">
<div class="wrap"><span class="Bb">行内标签的内容居中</span><div class="help"></div></div>
</div>
</body>
</html>
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
