你是不是也对元素居中的知识点很是模糊? 是不是苦于找不到一个总结的通俗易懂的说明? 是不是自己懒得去总结? 恭喜你, 搜到这篇博客文章! 这是鄙人在前端的学习与实践中总结出的元素的五大居中方式, 黏贴了代码并对代码做了解释, 希望对迷茫的有所帮助!
我自己是一名从事了多年开发的 web 前端老程序员, 目前辞职在做自己的 Web 前端私人定制课程, 今年年初我花了一个月整理了一份最适合 2019 年学习的 Web 前端学习干货, 各种框架都有整理, 送给每一位前端小伙伴, 想要获取的可以添加我的 Web 前端交流群 600610151, 即可免费获取.
下面的居中示例中, 统一使用了同一个 div 作为父元素和 p 作为子元素
设置一个 div, 并且设置了 div 的宽高边框, div 里面设置一个块元素 p, 设置了它的宽高和背景色
CSS 居中方式 1
五大居中 1
- *{
- margin:0;
- }
- div{
- width:200px;height:300px;border:2px solid #000;margin:200px auto;
- text-align:center;font-size:0;
- }
- div p{
- width:100px;height:100px;background:#666;
- display:inline-block;vertical-align:middle;
- }
- div:after{
- content:"";display:inline-block;height:100%;vertical-align:middle;
- }
这里利用了伪元素让子元素 p 在 div 盒子里左右水平居中只需要在它的父元素 div 里加 text-align:center; 垂直方向居中需要在父元素后面加了一个伪元素, 并使得样式为 inline-block;height:100%; 就是和父元素一样高, vertical-align:middle; 垂直居中, 也就是 p 元素相对与伪元素居中, 由于伪元素和 div 一样高, 所以相当于 p 元素在 div 里垂直居中.
CSS 居中方式 2
五大居中 2
- *{
- margin:0;
- }
- div{
- position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;
- }
- p{
- position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;
- }
这里利用了定位居中
子元素 p 设置 position:absolute 脱离文档流, 默认以 HTML 作为父元素, 所以我们给父元素 div 设置 position:relative; 使得 p 以 div 为父元素做位置的变动, left:0;tight:0;top:0;bottom:0;(只有设置了定位的元素才可以使用这种方式来移动), 最后 margin:auto; 就会水平和垂直都居中.
CSS 居中方式 3
五大居中 3
- *{
- margin:0;
- }
- div{
- display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;
- }
- p{
- width:100px;height:100px;background:#f99;
- }
这里利用了弹性盒居中
父元素 div 设置成弹性盒样式, justify-content:center; 主轴居中
align-items:center; 垂直居中 (而且这两个只能设置在父元素上, 弹性盒知识)
CSS 居中方式 4
五大居中 4
- *{
- margin:0;
- }
- div{
- position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;
- }
- p{
- width:100px;height:100px;background:#f99;position:absolute;
- left:50%;top:50%;margin:-50px 0 0 -50px;
- }
利用定位线左上角居中, 然后左移子元素宽度的一半, 再上移子元素高度的一半.
CSS 居中方式 5
五大居中 5
- *{
- margin:0;
- }
- div{
- position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;
- }
- p{
- position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
- transform:translate(-50%,-50%);
- }
利用动画移动属性 transform
结语
相信看了上面的有关 Html5,CSS 的元素五大居中方式, 你们就可以解决自己的小问题了, 但是也要养成一个总结的好习惯. 好记性不如烂笔头! 以前留下来的话语总是有他的道理. Come on!
来源: http://www.jianshu.com/p/1b5619843140