水平垂直居中
来源:互联网 发布:空间和域名 编辑:程序博客网 时间:2024/06/08 13:28
水平居中
水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中,即父元素必须是块级盒子容器,父元素宽度必须已经被设定好,下面对子元素的不同情况进行讨论:
- 子元素为行内元素,宽度是由其内容撑开的
这种情况下解决方案是给父元素设定text-align:center;
html代码:
<div class="wrap center"> <span class="span">1111</span></div>
css代码
.wrap{ width: 300px; height: 200px; border: 2px solid #ccc; box-sizing: border-box; } .span{ background: red; } .center{ text-align: center; }
子元素是块级元素且宽度已经设定
- 给子元素添加margin:0 auto;
HTML代码
<div class="wrap"> <div class="child auto"> non-child </div></div>
css代码:
.child{ width: 100px; height: 100px; background: green; box-sizing: border-box; } .auto{ margin:0 auto; } .wrap{ width: 300px; height: 200px; border: 2px solid #ccc; box-sizing: border-box; }
-
- 通过子元素相对父元素绝对定位
html代码
<div class="relative"> <div class="child absolute"> non-child </div></div>
css代码
.relative{ width: 300px; height: 200px; border: 2px solid #ccc; box-sizing: border-box; position: relative; } .absolute{ position: absolute; left:50%; margin-left:-50px; } .child{ width: 100px; height: 100px; background: green; box-sizing: border-box; }
这里还要设定子元素margin-top为-50是需要消除父元素50%造成的偏移
-
- 利用flex-box,父元素设置弹性盒子(可用于多个盒子水平居中)
HTML代码
<div class="flex"> <div class="child "> non-child </div></div>
css代码
.flex{ width: 300px; height: 200px; border: 2px solid #ccc; box-sizing: border-box; display:flex; justify-content:center; } .child{ width: 100px; height: 100px; background: green; box-sizing: border-box; }
- 多个块状元素水平居中
将元素的display属性设置为inline-block,并且把父元素的text-align属性设置为center即可
#container{ text-align:center;}#center{ display:inline-block;}
-
- 通过translateX设置偏移量
#outer{ height: 300px; width: 300px; border:1px solid red; position: relative; } #myDiv2{ height: 100px; width: 100px; background: yellow; position: absolute; left: 50%; transform:translateX(-50%);
定位元素的left/top等是相对于父元素的宽高的
transform中的translate获取的是相对于元素本身的宽和高。
垂直居中
和水平居中一样,这里要讲垂直居中,首先设定两个条件即父元素是盒子容器且高度已经设定
- 子元素是行内元素,高度是由其内容撑开的
这种情况下,需要通过设定父元素的line-height为其高度来使得子元素垂直居中
html代码
<div class="wrap line-height"> <span class="span">111111</span></div>
css代码
.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; } .span{ background: red; } .line-height{ line-height: 300px; }
- 子元素是块级元素但是子元素高度没有设定
在这种情况下实际上是不知道子元素的高度的,无法通过计算得到padding或margin来调整- 通过给父元素设定display:table-cell;vertical-align:middle
html代码
<div class="wrap table-cell"> <div class="non-height ">11111</div></div>
css代码
.table-cell{ display: table-cell; vertical-align: middle; } .non-height{ background: green; }.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; }
-
- flexbox
html代码
<div class="wrap flex"> <div class="non-height ">1111</div></div>
css代码
.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; }.non-height{ background: green; } .flex{ display: flex; align-items: center; }
子元素是块级元素且高度已经设定
- 利用绝对定位,让子元素相对于父元素绝对定位
html代码
<div class="wrap relative"> <div class="div1 absolute">111111</div></div>
css代码
.relative{ position: relative; } .absolute{ position: absolute; top:50%; margin-top: -50px; }.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; }.div1{ width:100px ; height: 100px; box-sizing: border-box; background: darkblue; }
-
- 利用flexbox
html代码
<div class="wrap flex"> <div class="div1 ">111111</div></div>
css代码
.flex{ display: flex; flex-direction: column; justify-content: center; }.wrap{ width:200px ; height: 300px; border: 2px solid #ccc; box-sizing: border-box; }.div1{ width:100px ; height: 100px; box-sizing: border-box; background: darkblue; }
-
- 利用translateY偏移
#outer{ height: 300px; width: 300px; border:1px solid red; position: relative; } #myDiv2{ height: 100px; width: 100px; background: yellow; position: absolute; top: 50%; transform:translateY(-50%);
总结
- 水平垂直居中:已知高度和宽度的元素解决方案1
这是一种不常见的居中方法,可自适应,比方案2更智能,如下:
.item{ position: absolute; margin:auto; left:0; top:0; right:0; bottom:0;}
- 水平垂直居中:已知高度和宽度的元素解决方案2
.item{ position: absolute; top: 50%; left: 50%; margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */ margin-left: -75px;}
- 水平垂直居中:已知高度和宽度的元素解决方案3:table-cell
div{ border: 3px solid #555; width: 300px; height: 200px; display: table-cell; vertical-align: middle; text-align: center;}span{ vertical-align: middle;}
- 水平垂直居中:未知高度和宽度元素解决方案
.item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */}
- 水平垂直居中:使用flex布局实现
.parent{ display: flex; justify-content:center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */ background: #AAA; height: 300px;}
- 水平垂直居中:使用Css3的transform布局实现
#container{ position:relative;}#center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
注意:
CSS3的transform和flex固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。
阅读全文
0 0
- 水平居中,垂直居中
- 水平居中垂直居中
- CSS水平垂直居中
- div水平垂直居中
- DIV 水平垂直居中
- 垂直水平都居中
- 图片水平垂直居中
- 水平垂直居中问题
- 图片垂直水平居中
- 水平 垂直居中
- div 水平垂直居中
- 内容水平,垂直居中
- css水平垂直居中
- 水平/垂直居中详解
- div水平垂直居中
- 内容垂直、水平居中
- CSS 水平垂直居中
- 水平垂直居中
- java学习路线
- zsh的安装和使用简介
- 服务计算作业5——cloudgo-inout
- Android 使用librtmp推流【音视频传输】
- 分治法实例-找下标,下标与对应值相等
- 水平垂直居中
- 微机原理输入并显示字符串
- Python 石头剪刀布,小游戏
- 自媒体攻略合集,教你如何做一名能赚钱的自媒体人
- 《设计模式之禅》读书笔记(三)之扩展工厂方法模式
- ELK学习13_logstash启动报错[logstash.outputs.elasticsearch] Unknown setting 'host' for elasticsearch
- tcp/ip学习笔记--第12、13章 broadcasting and multicasting and IGMP
- 用JavaScript写iPhone计算器
- SQL 摘要