CSS布局——单/多元素标签的水平、垂直居中、水平垂直居中（常用居中）
传送门：前端开发各种居中归纳
对比原图：
<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设置
margin:0 auto;来居中，类似上面（此时table里面的内容，均水平垂直居中）。
- 改变子元素的属性为表单属性
display: table;，加上margin: 0 auto;，但是兼容性不好。
position: absolute; left: 50%;+margin-left: -(width/2)px;不用float的错位居中（此方法不适用于文本内容，适用于图片/盒子/容器等的居中，文本内容center居中）
<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脱离文档流的错位居中
（下面只是介绍方法，但是例子还没有达到真正的居中，因为，这个方法是作用于该盒子所有内容，而不是单个，也就是说，要用此方法居中某个内容，外面得套个容器。）
<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，我要居中1span>div> <div class="box2"><span>我是span，我要居中2span>div> <div class="box3"><div>我是div，我要居中div>div> <div class="box4"><p>我是p，我要居中p>div> body>③接着从box1开始，按上面步骤居中，然后就发现问题：
④为何出现这种情况先不管，把剩下的box4完成第⑤步解释。
⑤这是因为使用float浮动容易影响后面（下面的div）元素布局，造成页面混乱，所以通常只要用float，那么下面的元素，必须加上clear: both;清除，来消除浮动带来的影响。
<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，我要居中1span>div> <div class="box2"><span>我是span，我要居中2span>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; }
单/多个行内元素的垂直居中
- （父元素高度确定）单行文本，给子元素设置行高等于父元素的高（我上一篇博文就讲过）
- （父元素高度确定）使用
表单标签代替
，设置的高，利用
自带的 vertical-align: middle;属性来垂直居中。
缺点：无意义标签太多。
另一种：直接给里面的内容套，设置
的高。
- （父元素高度确定）将容器（块元素）改为表单表格属性
display: table-cell;，但破坏原有块级元素的性质。
传送门：table-cell width和height的100%
- （行内块元素）通过给子元素设置
vertical-align: middle;来垂直居中。- 误区注意：
- ①并不是给子元素设置此属性就能垂直居中；
- ②并不是子元素相对于父元素进行垂直居中；
- ③它是相对于同辈元素的高来进行垂直居中的，在垂直方向，会移动到同辈元素的高的中间位置。
-
④它所参照的同辈元素，必须也添加
vertical-align: middle; -
⑤它本身如果内容简短不需要分行，则
display: inline;就行了，但是参考的同辈，必须是display: inline-block;因为需要和垂直居中内容共享一行才能起到参考作用，且需要设高，所以必须为行内块级元素。如果内容太多，则不妨都设置为display: inline-block;。 - ⑥总结的一点：就是给它一个空内容的同辈元素，并且将空内容标签的高设置跟父元素相等，让它参考来达到居中效果。
<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>单独的例子：
<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高度，影响精确度。
<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垂直居中。
-
④总的来说，就是
的做法，只是不需要插入多余的标签而已（不同的是，display:table;的水平居中需要center，table是设置margin）。
- 单标签单行内容的垂直与居中（四）
ps：行高只适用于文本内容，块状居中请看（五）。
- 单标签单行内容的垂直与居中（五）
ps：因为并不是所有居中都是文本形式的，要考虑所包裹的元素居中，所以就可以用这个了。
<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>
当然还有很多居中方法，这里归纳的是我当前所学适用于（html+css）的方法，其他还未涉及的，就没写在这里。
你可能感兴趣的:(html+css入门学习过程,CSS)
- 单标签单行内容的垂直与居中（四）
- （父元素高度确定）将容器（块元素）改为表单表格属性
- 改变子元素的属性为表单属性