阅读目录
- 水平居中
- 垂直居中
- 垂直居中: position 绝对定位演示
- 垂直居中: flex 演示
- 垂直居中: transform 演示
- 水平&垂直居中
- flex 1
- flex 2
- position
水平居中
1 行内块居中
设置父元素的 text-align: center
2 块级元素
设置当前块级元素(宽度) margin: 0 auto;
3 绝对定位
元素有宽度的情况下 left0/right0 margin: 0 auto;
4 flex
justify-content: center
垂直居中
1 绝对定位
元素有高度的情况下, top/bottom/margin: auto 0;
2 flex 布局
align-items: center;
变为包含块
3 transfrom
trnaslate(0, -50%)
垂直居中: position 绝对定位演示
<!DOCTYPE html>
<html lang="en">
<head><style>/* position relative 相对 absolute 绝对 fit-content自动调整*/.container {position: relative;height: 300px;background-color: orange;}.container .box1 {position: absolute;top: 0;bottom: 0;margin: auto 0;width: 100px;/* height: 100px; */height: fit-content;background-color: red;}</style>
</head>
<body><!--绝对定位缺点:1. 必须使用定位(脱离标准流)2. 必须元素设置高度 不然 height为auto沾满包含块的高度 (可以设置height: fit-content )--><div class="container"><div class="box1">box1</div>123</div>
</body>
</html>
垂直居中: flex 演示
<!DOCTYPE html>
<html lang="en">
<head><style>.flex-container {display: flex;align-items: center;height: 300px;background-color: pink;}.flex-container .box {background-color: red;}</style>
</head>
<body><!-- flex缺点:1. 当前 flex 布局中所有的元素都会被垂直居中2. 兼容性差点(基本可以忽略)--><div class="flex-container"><div class="box">123</div></div>
</body>
</html>
垂直居中: transform 演示
<!DOCTYPE html>
<html lang="en">
<head><style>.transform-container {height: 300px;background-color: orange;}.transform-container .box {display: inline-block;height: 100px;background-color: #f00;/* 1. 让元素向下位移父元素的50%2. 让元素向上位移自身的50%*//* margin-top: 50%; 的百分比是相对于包含块(父元素)的宽度 *//* margin-top: 50%; */position: relative;top: 50%;transform: translateY(-50%);transform: translate(0 ,- 50%);}</style>
</head>
<body><!-- 推荐方案: 不会造成脱表 兼容好 --><div class="transform-container"><div class="box">coderwhy</div>123</div>
</body>
</html>
水平&垂直居中
flex 1
<!DOCTYPE html>
<html lang="en">
<head><style>body {display: flex;height: 100vh;}.test {margin: auto;background-color: red;}</style>
</head>
<body><div class="test">我是水平垂直居中元素</div></body>
</html>
flex 2
<!DOCTYPE html>
<html lang="en">
<head><style>.test {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: skyblue;}</style>
</head>
<body><div class="test">我是水平垂直居中元素</div>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head><style>.test {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: red;}</style>
</head>
<body><div class="test">我是水平垂直居中元素transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。translate 就是平移是同时设置 translateX 和 translateY。</div>
</body>
</html>