欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css实现居中的方法

程序员文章站 2022-03-30 11:23:30
1.水平居中设置如下情景
111
222
1.1display:inline-block父元素设置text-align:center;子元素设置display:inline-block这种方式实现了...

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> 
  • 效果
    css实现居中的方法

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> 

css实现居中的方法

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> 

css实现居中的方法

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> 

css实现居中的方法

  • 方法二:
<style> .parent{ width: 500px; height: 200px; background-color: brown; display: flex; } .child{ width: 100px; height: 100px; margin: 0 auto; background-color: burlywood; } </style> 

多个:
css实现居中的方法
单个:
css实现居中的方法

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> 

css实现居中的方法

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> 

css实现居中的方法
注:此处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> 

css实现居中的方法

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> 

css实现居中的方法

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> 

css实现居中的方法
注:还是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> 

css实现居中的方法

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