CSS元素(文本、图片)水平垂直居中方法
2018-12-02 06:13:14来源:博客园 阅读 ()
1、text-align:center;
2、margin:0 auto;
3、display:inline-block; + text-align:center;
4、position:relative; + float:left;
5、line-height
6、上下左右padding
7、position:absolute; + margin:auto;
8、position:absolute; + 负margin
9、position:absolute; + calc()
10、table-cell + vertical-align + inline-block + text-align
11、伪元素 + vertical-align + inline-block + text-align
12、position:absolute; + transform:translate(-50%, -50%);
13、display:flex;
14、background-position:center;
15、writing-mode
1、text-align:center;
父容器上设置text-align:center; 用于设置为行内元素的水平居中
<style> p{ background-color:#f00; text-align:center; } </style> <p>居中</p>
2、margin:0 auto;
元素自身设置margin:0 auto; 用于设置为块级元素的水平居中(元素宽度固定,且不能浮动、绝对定位)
<style> div{ background-color:#099; } p{ width:100px; height:100px; margin:0 auto; background-color:#f00; } </style> <div><p></p></div>
3、display:inline-block; + text-align:center;
用于设置为内联块元素的水平居中(元素不能浮动、绝对定位,注意清除inline-block引起的下边空白)
<style> div{ background-color:#099; text-align:center; } p{ display:inline-block; margin:0; background-color:#f00; } </style> <div><p>居中</p></div>
4、position:relative; + float:left;
用于所有元素的水平居中(元素不能绝对定位,且内容若是过多,会出现横向滚动条,可以在父容器外套一层容器设置overflow:hidden;)
<style> div{ position:relative; left:50%; float:left; background-color:#099; } p{ position:relative; left:-50%; background-color:#f00; } </style> <div><p>居中</p></div>
5、line-height
用于单行文本的垂直居中(父容器高度固定)
<style> p{ height:100px; background-color:#f00; line-height:100px; } </style> <p>居中</p>
6、上下左右padding
父容器上设置上下左右padding,用于设置为内联块、块级元素的水平垂直居中(常用于按钮中)
<style> p{ display:inline-block; margin:0; padding:10px; background-color:#f00; } </style> <p>居中</p>
7、position:absolute; + margin:auto;
用于设置为块级元素的水平垂直居中(元素宽高固定)
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:0; right:0; bottom:0; left:0; width:50px; height:50px; margin:auto; background-color:#f00; } </style> <div><p></p></div>
8、position:absolute; + 负margin
用于设置为块级元素的水平垂直居中(元素宽高固定)
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; background-color:#f00; } </style> <div><p></p></div>
9、position:absolute; + calc()
用于设置为块级元素的水平垂直居中(元素宽高固定,IE8及以下不支持)
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:calc(50% - 25px); left:calc(50% - 25px); width:50px; height:50px; margin:0; background-color:#f00; } </style> <div><p></p></div>
10、table-cell + vertical-align + inline-block + text-align
用于设置为内联块元素的水平垂直居中(元素不能浮动、绝对定位,注意清除inline-block引起的下边空白)
<style> div{ display:table-cell; width:100px; height:100px; background-color:#099; text-align:center; vertical-align:middle; } p{ display:inline-block; margin:0; background-color:#f00; vertical-align:middle; } </style> <div><p>居中</p></div>
11、伪元素 + vertical-align + inline-block + text-align
用于设置为内联块元素的水平垂直居中(元素不能浮动、绝对定位,注意清除inline-block引起的下边空白)
<style> div{ height:100px; background-color:#099; text-align:center; } div:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle; } p{ display:inline-block; margin:0; background-color:#f00; vertical-align:middle; } </style> <div><p>居中</p></div>
12、position:absolute; + transform:translate(-50%, -50%);
用于设置为块级元素的水平垂直居中(IE8及以下不支持)
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:50%; left:50%; margin:0; background-color:#f00; transform:translate(-50%, -50%); } </style> <div><p>居中</p></div>
13、display:flex;
父容器上设置display:flex; 用于所有元素的水平垂直居中(IE10及以下不支持,本方法适用于所有元素)
<style> div{ display:flex; height:100px; background-color:#099; justify-content:center; align-items:center; } p{ margin:0; background-color:#f00; } </style> <div><p>居中</p></div>
14、background-position:center;
用于图片居中,使用透明图片宽高100%,背景图片background-position居中,background-image需要动态加载最好内联,也可以用span代替img,会少加载一张透明图片
以上方法都可以用于图片居中
<style> p{ height:100px; background-color:#f00; } img{ display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; } </style> <p><img style="background-image:url(images/1.jpg);" src="images/1.png" alt="居中"></p>
15、writing-mode
用于垂直居中,根据方法1、2、3改
<style> div{ width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr; } p{ display:inline; margin:0; background-color:#f00; writing-mode:horizontal-tb; } </style> <div><p>居中</p></div>
<style> div{ width:100%; height:100px; background-color:#099; writing-mode:vertical-lr; } p{ margin:auto 0; background-color:#f00; writing-mode:horizontal-tb; } </style> <div><p>居中</p></div>
<style> div{ width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr; } p{ display:inline-block; margin:0; background-color:#f00; writing-mode:horizontal-tb; } </style> <div><p>居中</p></div>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:js字符串如何倒序
下一篇:CSS中栅格系统布局的原理介绍
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash