css 居中
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 居中相关的知识，希望对你有一定的参考价值。
阅读目录
水平居中
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>
以上是关于css 居中的主要内容，如果未能解决你的问题，请参考以下文章