大家是不是对元素居中的知识点很是模糊? 是不是苦于找不到一个总结的通俗易懂的说明? 是不是自己懒得去总结? 今天小编在前端的学习与实践中总结出的元素的五大居中方式, 黏贴了代码并对代码做了解释, 希望对迷茫的有所帮助!
下面的居中示例中, 统一使用了同一个 div 作为父元素和 p 作为子元素
设置一个 div, 并且设置了 div 的宽高边框, div 里面设置一个块元素 p, 设置了它的宽高和背景色
CSS 居中方式 1
- <!doctype html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 五大居中 1
- </title>
- <style>
- *{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;}
- </style>
- </head>
- <body>
- <div>
- <p>
- </p>
- </div>
- </body>
- </HTML>
这里利用了伪元素让子元素 p 在 div 盒子里左右水平居中只需要在它的父元素 div 里加 text-align:center; 垂直方向居中需要在父元素后面加了一个伪元素, 并使得样式为 inline-block;height:100%; 就是和父元素一样高, vertical-align:middle; 垂直居中, 也就是 p 元素相对与伪元素居中, 由于伪元素和 div 一样高, 所以相当于 p 元素在 div 里垂直居中.
CSS 居中方式 2
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 五大居中 2
- </title>
- <style>
- *{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;}
- </style>
- </head>
- <body>
- <div>
- <p>
- </p>
- </div>
- </body>
- </HTML>
这里利用了定位居中
子元素 p 设置 position:absolute 脱离文档流, 默认以 HTML 作为父元素, 所以我们给父元素 div 设置 position:relative; 使得 p 以 div 为父元素做位置的变动, left:0;tight:0;top:0;bottom:0;(只有设置了定位的元素才可以使用这种方式来移动), 最后 margin:auto; 就会水平和垂直都居中.
CSS 居中方式 3
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 五大居中 3
- </title>
- <style>
- *{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;}
- </style>
- </head>
- <body>
- <div>
- <p>
- </p>
- </div>
- </body>
- </HTML>
这里利用了弹性盒居中
父元素 div 设置成弹性盒样式, justify-content:center; 主轴居中
align-items:center; 垂直居中 (而且这两个只能设置在父元素上, 弹性盒知识)
CSS 居中方式 4
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 五大居中 4
- </title>
- <style>
- *{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;}
- </style>
- </head>
- <body>
- <div>
- <p>
- </p>
- </div>
- </body>
- </HTML>
利用定位线左上角居中, 然后左移子元素宽度的一半, 再上移子元素高度的一半.
CSS 居中方式 5
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 五大居中 5
- </title>
- <style>
- *{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%);}
- </style>
- </head>
- <body>
- <div>
- <p>
- </p>
- </div>
- </body>
- </HTML>
利用动画移动属性 transform
结语
相信看了上面的有关 Html5,CSS 的元素五大居中方式, 你们就可以解决自己的小问题了, 但是也要养成一个总结的好习惯. 好记性不如烂笔头! 以前留下来的话语总是有他的道理. Come on!
来源: http://www.jianshu.com/p/0da590812b77