元素居中的多种实现方式!
水平居中
<1>行内元素的居中
被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
text-align
<title>行内元素水平居中</title><style>div{ border:1px solid red; margin:20px;
}.txtCenter{text-align:center;}.imgCenter{text-align:center;}</style></head><body><div class="txtCenter">我想要在父容器中水平居中显示。</div><div class="imgCenter"></div></body><2>块状元素的居中
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
定宽块状元素
margin: value auto;
<title>定宽块状元素水平居中</title><style>
div{ border:1px solid red; width:200px; margin:20px auto;
}</style><body>
<div>我是定宽块状元素，我要水平居中显示。</div></body>不定宽块状元素
- table + margin
table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
优点：只需在子元素child上设置css样式，不用关心父元素的 缺点：兼容性较差，如果需要兼容，更改html样式，改为table样式
<-- css --><style type="text/css">
body{margin:20px;} .parent{background: red;} .child{ display: table; margin: 0 auto; background: blue; opacity: .5;
}</style><-- html --><div class="parent">
<div class="child">DEMO</div></div>- inline-block + text-align
初始DEMO是块级元素，会充满父元素；inline-block默认宽度为内容宽度,然后给父元素设置text-align
优点：兼容性较好，甚至可以兼容IE6 缺点：子元素会继承父元素的text-align，使子元素里的内容也水平居中
<style type="text/css">
body{margin:20px;} .parent{ background: red; text-align: center;
} .child{ display: inline-block; background: blue;
}</style><body><div class="parent">
<div class="child">DEMO</div></div></body>- absolute + transform
利用绝对定位和偏移解决居中问题,
left:50%;将子元素距离左边50%，translateX是将自身宽度往左偏移50%；结果是水平居中
优点：因为position：absolute;脱离文档流，所以不会影响其他的子元素； 缺点：transform是css3的内容，所以兼容性较差；
<style type="text/css">
body{margin:20px;} .parent{background:#ddd;} .child{background:#666;color:#fff;} .parent{height:1.5em;} .parent{ position: relative;
} .child{ position: absolute; left: 50%; transform: translateX(-50%);
}</style></head><body><div class="parent">
<div class="child">DEMO</div></div>- float + relative
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<style>.wrap{ clear:both; float:left; position:relative; left:50%
}.wrap-center{ background:#ccc; position:relative; left:-50%;
}</style></head><body><div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div></div>- flex + justify-content
flex是弹性布局,有自己的居中属性,水平居中justify-content:center
优点：只需设置父元素，不用设置子元素 缺点：flex也是css3的，兼容性较差
<style type="text/css">
body{margin:20px;} .parent{background:#ddd;} .child{background:#666;color:#fff;} .parent{ display: flex; justify-content: center;
} .child{ margin: 0 auto;
}</style></head><body><div class="parent">
<div class="child">DEMO</div></div>垂直居中
<1>父元素高度确定的单行文本
通过设置父元素的
height和line-height高度一致来实现的。(height:该元素的高度，line-height:顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
缺点:当文字内容的长度大于块的宽时，就有内容脱离了块。
<title>垂直居中</title><style>.wrap h2{ margin:0; height:100px; line-height:100px; background:#ccc;
}</style></head><body><div class="wrap">
<h2>hello world!</h2></div></body><2>父元素高度不确定的多行文本
- table-cell + vertical-align
竖直居中的属性
vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以可以设置垂直居中
优点:不用添加无意义的标签 缺点:兼容性有问题
<title>垂直居中</title><style type="text/css">
body{margin:20px;} .parent{background:#ddd;} .child{background:#666;color:#fff;} .parent{width:4em;height:500px;} .child{width:100%;} .parent{ display: table-cell; vertical-align: middle;
}</style></head><body><div class="parent">
<div class="child">DEMO</div></div>下面的代码直接在
div外面机加一个tabletbodytrtd,又因为td标签默认情况下就默认设置了vertical-align为middle，所以我们不需要显式地设置了。
<style>
.wrap{height:300px;background:#ccc}</style></head><body><table><tbody><tr><td class="wrap"><div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p></div></td></tr></tbody></table><table><tbody><tr><td class="wrap"><div>
</div></td></tr></tbody></table></body>- absolute + transform
这个方法和水平居中的方法类似,唯一的区别是
top:50%;,transform:translateY(-50%);
- flex + align-items
与水平居中
justify-content对应的属性align-items值为center,也可以实现垂直居中 设置display:flex;会使子元素充满父元素。因为align-items的值默认为stretch。
水平垂直居中
综合水平居中和垂直居中一起
- inline-block + text-align +table-cell +vertical-align
<title>居中</title><style type="text/css">
body{margin:20px;} .parent{width:200px;height:300px;} .parent{background:#ddd;} .child{background:#666;color:#fff;} .parent{ text-align: center; display: table-cell; vertical-align: middle;
} .child{ display: inline-block;
}</style></head><body><div class="parent">
<div class="child">DEMO</div></div></body>- absolute + transform
<title>居中</title><style type="text/css">
body{margin:20px;} .parent{width:200px;height:300px;} .parent{background:#ddd;} .child{background:#666;color:#fff;} .parent{ position: relative;
} .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}</style></head><body><div class="parent">
<div class="child">DEMO</div></div>- flex + justify-content + align-items
<title>居中</title><style type="text/css">
body{margin:20px;} .parent{width:200px;height:300px;} .parent{background:#ddd;} .child{background:#666;color:#fff;} .parent{ display: flex; justify-content: center; align-items: center;
}</style></head><body><div class="parent">
<div class="child">DEMO</div></div></body>垂直居中的搭配有很多,我们可以根据实际情况做出一个判断,然后充分了解一些居中的属性以及属性值
本文所讲述Demo下载地址https://github.com/shiyuemengxiang/center
总结：解决此类问题，我们需要了解css属性的值和特性，了解属性以后，对问题进行分解，把特性和分解的问题进行一些联系，问题可以用那些特性实现，综合解决
本文参考来源来自互联网!如有版权侵犯请留言!
腾讯云开发者
