HTML--元素居中各种处理方法2
紧接上一篇。
如果要居中的是一个块元素呢。
1)如果你知道这个块元素的高度:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <main> 2 3 <div> 4 I'm a block-level element with a fixed height, centered vertically within my parent. 5 </div> 6 7 </main> 8 9 10 body { 11 background: #f06d06; 12 font-size: 80%; 13 } 14 15 main { 16 background: white; 17 height: 300px; 18 margin: 20px; 19 width: 300px; 20 position: relative; 21 resize: vertical; 22 overflow: auto; 23 } 24 25 main div { 26 position: absolute; 27 top: 50%; 28 left: 20px; 29 right: 20px; 30 height: 100px; 31 margin-top: -70px; 32 background: black; 33 color: white; 34 padding: 20px; 35 }
resize 属性规定是否可由用户调整元素的尺寸。resize: none|both|horizontal|vertical;
总结起来就是
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 .parent { 2 position: relative; 3 } 4 .child { 5 position: absolute; 6 top: 50%; 7 height: 100px; 8 margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ 9 }
2)如果你不知道这个块元素的高度,因为他会变化的,比如图片变了,宽度变了,样式变了等等都会改变元素的高度。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 body { 2 background: #f06d06; 3 font-size: 80%; 4 } 5 6 main { 7 background: white; 8 height: 300px; 9 margin: 20px; 10 width: 300px; 11 position: relative; 12 resize: vertical; 13 overflow: auto; 14 } 15 16 main div { 17 position: absolute; 18 top: 50%; 19 left: 20px; 20 right: 20px; 21 background: black; 22 color: white; 23 padding: 20px; 24 transform: translateY(-50%); 25 resize: vertical; 26 overflow: auto; 27 }
总结起来就是要这样子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 .parent { 2 position: relative; 3 } 4 .child { 5 position: absolute; 6 top: 50%; 7 transform: translateY(-50%); 8 }
3)当然,如果你可以使用flex
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
main { background: white; height: 300px; width: 200px; padding: 20px; margin: 20px; display: flex; flex-direction: column; justify-content: center; resize: vertical; overflow: auto; } main div { background: black; color: white; padding: 20px; resize: vertical; overflow: auto; }
总结起来就是
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 .parent { 2 display: flex; 3 flex-direction: column; 4 justify-content: center; 5 }
下面我们就要进入我们的难点了,就是如何水平垂直方向都达到居中。
一般情况下,我们可以结合上面的方法来达到目标。但是总有一些意外发生。
1)元素是固定的大小。首先你得设置外边距为负值,上边距为高度的一般,左边距为宽度的一般,其次在采用固定在50%/50%(上左或者下右)就可以了。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
main { position: relative; background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; resize: both; overflow: auto; } main div { background: black; color: white; width: 200px; height: 100px; margin: -70px 0 0 -120px; position: absolute; top: 50%; left: 50%; padding: 20px; }
HTML代码和原来的一样,就不多说了。
总结起来就是:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
2)不知道元素的大小。这是你可以利用transform的属性。使其在两个方向上都进行翻转-50%。这是基于当前元素的大小来进行剧中的。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
main { position: relative; background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; resize: both; overflow: auto; } main div { background: black; color: white; width: 50%; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; padding: 20px; resize: both; overflow: auto; }
总结:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3)如果你可以使用flexbox;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
main { background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; display: flex; justify-content: center; align-items: center; resize: both; overflow: auto; } main div { background: black; color: white; width: 50%; padding: 20px; resize: both; overflow: auto; }
总结起来就是:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.parent { display: flex; justify-content: center; align-items: center; }
总结
如果以上方法你都掌握了,居中对你而言就是一个小问题。
树林美丽、幽暗而深邃,但我有诺言尚待实现,还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特