八十七、css水平垂直居中的布局方式 -尊龙游戏旗舰厅官网
@author：runsen
| 2020/11/30、 周一、今天又是奋斗的一天。 |
文章目录
- 水平居中
- inline-block text-algin 属性配合使用
- 子元素block和margin属性配合使用
- absolute transform属性配合使用 (针对绝对定位）
- display: flex 和justify-content（ 弹性布局）
- 垂直居中
- verticle-align:middle和display: table-cell;
- 绝对定位的解决方法
- display: flex 和justify-content（ 弹性布局）
- 居中布局
通过margin: 0 auto; text-align: center实现css水平居中。行内元素的水平居中：text-align:center;
text-align属性是针对 内联元素居中得属性设置，对于块状元素使用margin:0 auto;来控制水平居中
inline-block text-algin 属性配合使用
水平居中布局的第一种尊龙游戏旗舰厅官网的解决方案是对父元素进行text-align: center;，对子元素进行display: inline-block;
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>水平居中布局的第一种尊龙游戏旗舰厅官网的解决方案title><style>#parent {width: 100%;height: 200px;background: #ccc;/* text-align属性:是为文本内容设置对齐方式* left:左对齐* center:居中对齐* right:右对齐*/text-align: center;}#child {width: 200px;height: 200px;background: #c9394a;/* display属性:* block:块级元素* inline:内联元素(text-align属性有效)* width和height属性是无效的* inline-block:行内块级元素(块级 内联)* width和height属性是有效的*/display: inline-block;/* text-align: left是对子级元素文本内容设置对齐方式，默认会使用父级元素的center居中对齐*/text-align: left;}style> head><body><div id="parent"><div id="child">居中布局div>div> body>子元素block和margin属性配合使用
子元素block和margin属性配合使用：display: block和margin: 0 auto;
margin:0 auto有时候会失效
最好的办法就是给子元素设置：display:block,然后margin:0 auto生效。
margin:0 auto的理解是，上下边距为0，左右边距为auto（auto是自动调整大小）
在浏览器中div如果没有设置宽度，那么宽度自动为浏览器的宽度，这是给div设置宽度后，div会靠左显示，margin:0 atuo就是为了填充右侧的空白空间。
margin:0 auto但是对于绝对定位的元素就会失效；因为绝对定位以后就脱离了父级盒子，只能以父级为参考进行定位，你可以理解为绝对定位以后就浮在了父级上面，所以margin中auto就没有了参考值，如果绝对定位以后还想居中，可以left：50%；margin-left：负的盒子宽度的一半即可
<head><style>#parent {/* 必须设置width的属性 */width: 100%;height: 200px;background: #ccc;}#child {width: 200px;height: 200px;background: #c9394a;/* display的值为table和block *//* display: block; div默认是display: block;*//* margin属性:外边距* 一个值 - 上右下左* 二个值 - 第一个表示上下，第二个表示左右* auto - 表示根据浏览器自动分配* 三个值 - 第一个表示上，第二个表示左右，第三个表示下* 四个值 - 上右下左*/margin: 0 auto;/* position: absolute; 子元素绝对定位 margin: 0 auto;就会失效*/}style> head><body><div id="parent"><div id="child">居中布局div>div> body>absolute transform属性配合使用 (针对绝对定位）
margin:0 auto但是对于绝对定位的元素就会失效，如果绝对定位以后还想居中，可以left：50%；margin-left：负的盒子宽度的一半即可，其实也可以使用transform: translatex(-50%);，就是向左偏移。
<head><style>#parent {width: 100%;height: 200px;background: #ccc;/* 开启定位 */position: relative;}#child {width: 300px;height: 200px;background: #c9394a;/* 当把当前元素设置为绝对定位之后:* 如果父级元素没有开启定位的话，当前元素是相对于页面定位的* 如果父级元素开启了定位的话，当前元素是相对于父级元素定位的*/position: absolute;left: 50%;transform: translatex(-50%);}style> head><body><div id="parent"><div id="child">div>div> body>display: flex 和justify-content（ 弹性布局）
利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
<head><style>#parent {width: 100%;height: 200px;background: #ccc;/* 弹性布局 */display: flex;justify-content: center;/* align-items:center; 是实现垂直居中 */}#child {width: 300px;height: 200px;background: #c9394a;}style> head><body><div id="parent"><div id="child">div>div> body>verticle-align:middle和display: table-cell;
通过vertical-align:middle实现css垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>垂直居中布局的第一种尊龙游戏旗舰厅官网的解决方案title><style>#parent {width: 200px;height: 600px;background: #ccc;/* display属性:* table:设置当前元素为元素* table-cell:设置当前元素为元素(单元格)*/display: table-cell;/* vertical-align属性:用于设置文本内容的垂直方向对齐方式* top:顶部对齐* middle:居中对齐* bottom:底部对齐*/vertical-align: middle;}#child {width: 200px;height: 200px;background: #c9394a;}style>
head><body><div id="parent">居中布局<div id="child">div>div>
body>
绝对定位的解决方法绝对定位的垂直居中，就是把left变成了top，把translatex变成了translatey <head><style>#parent {width: 200px;height: 600px;background: #ccc;position: relative;}#child {width: 200px;height: 200px;background: #c9394a;position: absolute;top: 50%;transform: translatey(-50%)}style> head><body><div id="parent"><div id="child">div>div> body>display: flex 和justify-content（ 弹性布局）display: flex 和justify-content（ 弹性布局）在加上一个align-items:center;就可以实现垂直居中 居中布局就是将上面的方法合在一起，最常见的就是水平选择子元素block和margin属性配合使用，垂直居中选择verticle-align:middle和display: table-cell; <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>居中布局的第一种尊龙游戏旗舰厅官网的解决方案title><style>#parent {width: 1000px;height: 600px;background: #ccc;/* | */display: table-cell;vertical-align: middle;}#child {width: 200px;height: 200px;background: #c9394a;/* */display: block;margin: 0 auto;}style>
head><body><div id="parent"><div id="child">div>div>
body>
弹性布局(flex)和绝对定位布局将上面的代码合并即可。 参考：https://www.imooc.com/learn/1189。一课全面掌握主流css布局 总结以上是尊龙游戏旗舰厅官网为你收集整理的八十七、css水平垂直居中的布局方式的全部内容，希望文章能够帮你解决所遇到的问题。 如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。 
|