css实现居中的方法
1.水平居中
设置如下情景
<div class="parent"> <div class="child"> 111 </div> <div class="child"> 222 </div> </div>
1.1 display:inline-block
父元素设置text-align:center;
子元素设置display:inline-block
这种方式实现了块级父容器中让行内元素或者类行内元素居中
<style> .parent{ width: 500px; height: 200px; background-color: brown; text-align: center; } .child{ width: 100px; height: 100px; display: inline-block; background-color: burlywood; } </style>
-
效果
1.2 display:table
子元素设置 dispaly: table, margin: 0 auto;
注:table的宽度是由内容决定的,如果子元素是其他块级元素,也可以用这种方式实现在父元素中水平居中。但是,设置为其他块级元素,就要指定宽度,不然子元素的宽度就撑满父级元素了。(指定子元素的宽度,可能会出现子元素的内容超过宽度的情况)
<style> .parent{ width: 500px; height: 200px; background-color: brown; text-align: center; } .child{ width: 100px; height: 100px; display: table; margin: 0 auto; background-color: burlywood; } </style>
1.3 position:absolute + transform
父元素设置position:relative
子元素设置position:absolute;left:50%;transform:translate(-50%);
<style> .parent{ width: 500px; height: 200px; background-color: brown; position: relative; } .child{ width: 100px; height: 100px; position: absolute; left: 50%; transform: translate(-50%); background-color: burlywood; } </style>
1.4 display:flex
方法一:父元素设置display:flex; justify-content:center;
方法二:父元素设置display:flex; 子元素设置margin:0 atuo;(只能实现单个元素在父元素的居中)
- 方法一:
<style> .parent{ width: 500px; height: 200px; background-color: brown; display: flex; justify-content: center; } .child{ width: 100px; height: 100px; background-color: burlywood; } </style>
- 方法二:
<style> .parent{ width: 500px; height: 200px; background-color: brown; display: flex; } .child{ width: 100px; height: 100px; margin: 0 auto; background-color: burlywood; } </style>
多个:
单个:
2. 垂直居中
设置如下情景:
<style> .parent{ width: 300px; height: 300px; background-color: brown; display: table-cell; vertical-align: middle; } .child{ width: 100px; height: 100px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style>
2.1 display: table-cell
父元素设置display:table-cell; vertical-align:middle;(可以使高度不同的元素都垂直居中)
<style> .parent{ width: 300px; height: 300px; background-color: brown; display: table-cell; vertical-align: middle; } .child{ width: 100px; height: 100px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style>
2.2 position: absolute + transform
父元素设置position:relative;
子元素设置position:absolute; top:50%; transform:translate(-50%);
<style> .parent{ width: 300px; height: 300px; background-color: brown; position: relative; } .child{ width: 100px; height: 100px; position: absolute; top: 50%; transform: translateY(-50%); } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style>
注:此处child2覆盖了child1
2.3 dispaly:flex
方法一:父元素设置display:flex;align-items:center;
方法二:父元素设置display:flex;子元素设置margin: auto 0;
<style> .parent{ width: 300px; height: 300px; background-color: brown; display: flex; /* align-items: center; */ } .child{ width: 100px; height: 100px; margin: auto 0; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style>
3. 水平垂直居中
3.1 inline-block + table-cell
父元素设置text-align: center; display: table-cell; vertical-align: middle;
子元素设置display: inline-block;text-align: left;
<style> .parent{ width: 300px; height: 300px; background-color: brown; text-align: center; display: table-cell; vertical-align: middle; /*消除间隔*/ font-size: 0; } .child{ width: 100px; height: 100px; display: inline-block; /* 子元素会继承父元素的text-align:center,这一步是防止子元素文字水平居中 */ text-align: left; /*恢复子元素的字体大小*/ font-size: 16px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style>
3.2 absolute + transform
父元素设置position:relative
子元素设置position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
<style> .parent{ width: 300px; height: 300px; background-color: brown; position: relative; } .child{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style>
注:还是child2覆盖了child1
3.3 flex + align-items + justify-content
父元素设置display:flex; justify-content:center; align-items:center;
<style> .parent{ width: 300px; height: 300px; background-color: brown; display: flex; justify-content: center; align-items: center; } .child{ width: 100px; height: 100px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style>
3.4 绝对定位 + margin 0 auto
父元素设置position:relative
子元素设置position:absolute; top:0; left:0; right:0; bottom:0; margin auto auto;width和height
本文地址:https://blog.csdn.net/qq_41884544/article/details/113971494
上一篇: Sliding Window[滑动窗口]
下一篇: js 跨浏览器tab页通信