水平居中
- 对于子元素是行内元素(或者inline-block)时使用
text-aling: center;,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。
<style>
.box {
border:1px solid #aaa;
text-align: center;
/* text-align定义行内内容相对于父元素如何对齐 */
}
img {
100px;
}
</style>
</head>
<body>
<div class="box">
<img src="http://static.jsbin.com/images/dave.min.svg" alt="">
</div>
</body>
- 对于子元素时块级元素时，使用外边距设置进行水平居中
<style>
.box {
border:1px solid #aaa;
300px;
}
.son {
height: 200px;
100px;
border: 1px solid;
margin: 0 auto;
/* 子元素进行外边距设置 */
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
效果和上图一样
垂直居中
- 块级元素里的文字垂直居中
对于块级元素来说，它的高度在没有显示设置的情况下，是由子元素高度撑开的，所以对于子元素是内联元素的可以采取对父元素进行设置padding来进行垂直居中
<style>
.box {
border:1px solid #aaa;
100px;
font-size: 14px;
word-break:break-all;
/* line-height: 2em; */
padding: 14px;
}
</style>
</head>
<body>
<div class="box">
<span>aaaaaaaaaaaaaaaaaafaddadfadfadfadfdfadfadfadfdfadafadfagadgadfadferew</span>
</div>
水平垂直居中
-
子元素宽高确定
- 使用子元素margin进行居中
<style> .box { border:1px solid #aaa; 400px; height: 400px; } .son { height: 100px; 100px; border: 1px solid; /* 代码如下 */ margin-left: calc(50% - 50px); margin-top: calc(50% - 50px); } </style> </head> <body> <div class="box"> <div class="son"></div> </div> -
子元素宽高不确定
- 使用定位加margin 居中
<style> .box { border:1px solid #aaa; 400px; height: 400px; position: relative; } .son { height: 100px; 100px; border: 1px solid; /* 代码如下 */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style>
```
<style>
.box {
border:1px solid #aaa;
400px;
height: 400px;
position: relative;
}
.son {
height: 100px;
100px;
border: 1px solid;
/* x、y 轴 平移50% */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
```
-
当子元素是一个图片时,父元素使用text-align:center; 子元素设置vertical-align: middle;，且用父元素的伪元素等同父元素高度后设置为vertical-align:middle;
<style> .box { border:1px solid #aaa; 400px; height: 400px; text-align: center; } .box::after {content:''; display: inline-block; height:100%; vertical-align:middle; } img { height: 100px; vertical-align:middle; } </style> </head> <body> <div class="box"> <img src="http://static.jsbin.com/images/dave.min.svg" alt=''> </div> -
对父元素设置为table-cell来实现居中，需要设置宽高
<style> .box { border:1px solid #aaa; 400px; height: 400px; display: table-cell; vertical-align:middle; text-align:center; } img { height: 100px; } </style> </head> <body> <div class="box"> <img src="http://static.jsbin.com/images/dave.min.svg" alt=''> </div> -
flex 布局，使用主轴和侧轴的对齐方式来实现居中
<style> .box { border:1px solid #aaa; 400px; height: 400px; display: flex; justify-content: center; /* 主轴对齐方式 */ align-items: center; /* 交叉轴对齐方式 */ } img { height: 100px; } </style> </head> <body> <div class="box"> <img src="http://static.jsbin.com/images/dave.min.svg" alt=''> </div> </body>
如有错漏，欢迎指正。