行内元素
方法一：给行内元素设置行高
<div class="box"><span>行内元素</span>
</div>
<style type="text/css">.box{width: 100%;height: 200px;background-color: orange;line-height: 200px;text-align: center;}
</style>
方法二：给行内元素设置布局方式为grid
<div class="box"><span>行内元素</span>
</div>
<style type="text/css">.box{width: 100%;height: 200px;background-color: orange;text-align: center;display: grid;align-items: center;}
</style>
块级元素
<div class="search-index"></div><style type="text/css">/* 搜索模块 */.search-index{position: fixed;top: 0;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);/* 固定的盒子应该有宽度固定定位跟父级*/width: 100%;min-width: 320px; max-width: 540px;height: 44px;background-color: pink;}</style>
table水平垂直居中
方法: inline-block + text-align + table-cell + vertical-align
<style>* {margin: 0;padding: 0;}.box {display: table-cell;width: 100vw;height: 200px;border: 1px solid blue;text-align: center; /*水平居中*/vertical-align: middle; /*垂直居中*/}.box > span {}.box > p {width: 100px;display: inline-block; /* 防止块级元素宽度独占一行，内联元素可不设置 */}
</style>
<div class="box"><p>块级元素: table水平垂直居中</p>
</div>
<div class="box"><span>行内元素: table水平垂直居中</span>
</div>
知道父元素高度,子元素高度
方法: 绝对定位方式+四个方向置0 + margin: auto
<style>* {margin: 0;padding: 0;}.box {position: relative;height: 300px;border: 1px solid blue;}.box > p {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;}
</style><div class="box"><p>绝对定位方式+四个方向置0</p>
</div>
如果我们无法知道需要水平、垂直居中的元素的宽高
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>水平垂直居中</title><style>.outer-wrapper {display: flex;justify-content: center;align-items: center;width: 500px;height: 300px;border: 1px solid royalblue;}.inter-wrapper {background: sandybrown;}</style></head><body><div class="outer-wrapper"><span class="inter-wrapper">我需要居中～～～</span></div></body>
</html>
position（定位）+ transform: translate()位移
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>水平垂直居中</title><style>.outer-wrapper {position: relative;width: 500px;height: 300px;border: 1px solid royalblue;}.inter-wrapper {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background: sandybrown;}</style></head><body><div class="outer-wrapper"><span class="inter-wrapper">我需要居中～～～</span></div></body>
</html>
- 文本/行内元素/行内块元素可以使用text-align: center水平居中
- 文本/行内元素/行内块元素可以使用line-height垂直居中
- 多行文本可以使用在外层包裹一个行内块元素然后在使用text-align: center、line-height、vertic-align居中
- 对于已知宽高的元素可以采用position+负margin、position+margin及position+calc的方式居中。
- 对于未知宽高的元素可以采用position+transform、flex布局及grid布局的方式居中
竖直排列的 css
.verticalClass{width:100%;height:200px;display:flex;flex-direction:column;justify-content:space-between;
}
