CSS-屏幕居中网页内容的三种方法

CSS元素居中⽅式总结作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在开发过程中，很多⽹页需求要求我们居中⼀个div，⽐如html⽂档流当中的⼀块div，⽐如弹出层内容部分这种脱离了⽂档流等。

不同的情况有不同的居中⽅式，接下来就分享下⼀下⼏种常⽤的居中⽅式。

1、margin:0 auto ⽔平居中也就是将margin-left和margin-right属性设置为auto，从⽽达到⽔平居中的效果。

前提：已设置width值。

HTML:<div class="box"></div>CSS:.box{width:500px;height:100px;background:#f00;margin:0 auto;}注意：这种对齐⽅式要求居中元素是块级元素，并且不能脱离⽂档流（如设置position:absolute）,否则⽆效。

2、text-align:center ⽅式这种⽅式可以⽔平居中块级元素中的⾏内元素，如inline，inline-block；<div class="box"><span>text-algin:center</span></div>.box{width:500px;height:100px;background:#f00;text-align: center;}.center_text{display:inline-block;width:500px}但是如果⽤来居中块级元素中的块级元素时，如div中的div，当内层的div有⾃⼰的宽度，这种⽅法就会失效。

只能让⾥⾯div的⽂字等内容居中，⽽div仍然是左对齐的。

⼀般的图⽚居中都是和text-align⼀样，将图⽚包装在⼀个div中，将该div的text-align设为center即可。

<div class="box"><img src="img/5d8eb50e70116.png" width="200px" height="150px"/></div>.box{width:300px;background:#f00;text-align: center;}3、position:absolute⽅式⽔平垂直居 (脱离⽂档流的居中⽅式)1）absolute + 负margin（已知宽⾼）使⽤绝对定位和负外边距对块级元素进⾏垂直居中，利⽤ position:absolute 搭配top，left 50%，再将 margin 设为负值也可以对div进⾏⽔平垂直居中。

div水平居中HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。

水平居中直接加上标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法放上示范的html代码：MAIN方法一：div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。

.main{text-align: center; /*让div内部文字居中*/background-color: #fff;border-radius: 20px;width: 300px;height: 350px;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}方法二：仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

.main{text-align: center;background-color: #fff;border-radius: 20px;width: 300px;height: 350px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);方法三：对于水平居中，可以使用最简单的标签，不过已经过时了，用法如下：1231这个标签就是相对于标签里的文字，可以使其居中。

由于center标签已经过时了，所以正规一点的话还是不建议使用的，可以使用如下的方式代替：123感谢您的阅读！。

css 文字垂直居中的几种方法在CSS中，有多种方法可以使文字垂直居中。

以下是其中的一些方法：1. 使用 `line-height`：如果你只处理单行文本，你可以设置元素的`line-height` 等于其`height`。

```cssdiv {height: 100px;line-height: 100px;}```2. 使用 `flexbox`：Flexbox 是一个强大的布局工具，可以很容易地实现垂直居中。

```cssdiv {display: flex;justify-content: center;align-items: center;height: 100px;}```3. 使用 `grid`：和 flexbox 类似，grid 布局也提供了一种方式来轻松实现垂直居中。

```cssdiv {display: grid;align-items: center;height: 100px;}```4. 使用 `position` 和 `transform`：对于任何元素，你都可以使用绝对定位和转换来垂直居中。

```cssdiv {position: relative;}div::before {content: "";position: absolute;top: 50%;left: 0;right: 0;height: 100px; /* or whatever height you want */ transform: translateY(-50%);}```5. 使用 `table` 布局：将元素的 display 属性设置为 table-cell，并使用 vertical-align。

但请注意，这需要父元素也设置为 display: table。

```cssdiv {display: table-cell;vertical-align: middle;}```6. 使用 CSS variables：对于更现代的布局，可以使用 CSS variables 和calc() 来动态计算位置。

css 文字水平垂直居中的几种方法CSS文字的水平垂直居中是Web开发中常用的技巧之一。

以下是几种常见的方法来实现此效果：
1. 使用Flexbox布局：
Flexbox是CSS3中的一种弹性盒子布局模型，它可以轻松实现元素的居中对齐。

对于文字，可以将其包装在一个容器中，然后通过设置容器的display属性为flex，并使用align-items和justify-content属性来实现水平和垂直居中。

2. 使用绝对定位和transform属性：
通过将文字元素的position属性设置为absolute，配合top、bottom、left 和right属性来决定位置。

然后，使用transform属性的translate属性来使文字水平垂直居中。

例如：transform: translate(-50%, -50%);。

3. 使用line-height属性：
可以通过设置文字所在容器的line-height属性与容器的高度相等来实现垂直居中。

例如：line-height: 300px;。

4. 使用table布局：
将文字元素包装在一个table元素中，并使用table-cell元素来实现水平和垂直居中。

设置table元素的display属性为table，子元素的display属性为table-cell，并使用text-align和vertical-align属性来实现居中。

以上是几种常见的方法来实现CSS文字的水平垂直居中。

根据实际情况和需求，选择适合的方法来实现所需效果。

css 实现上下左右居中的几种方法（原创版3篇）目录（篇1）1.标题：css 实现上下左右居中的几种方法2.方法一：使用 Flexbox 布局3.方法二：使用 Grid 布局4.方法三：使用绝对定位与 transform5.方法四：使用绝对定位与 margin:auto6.方法五：使用 position:relative 与 transform7.总结：各种方法的优缺点及适用场景正文（篇1）在网页设计中，实现元素的上下左右居中是一个常见的需求。

CSS 提供了多种方法来实现这一效果。

本文将介绍五种常用的方法。

方法一：使用 Flexbox 布局Flexbox 是 CSS3 引入的一种弹性盒子布局模式，可以轻松实现元素的居中。

首先，将需要居中的元素的容器设置为 display: flex，然后使用 justify-content 和 align-items 属性分别设置水平和垂直居中。

方法二：使用 Grid 布局Grid 布局是 CSS3 引入的另一种布局模式，适用于实现复杂的布局设计。

通过将容器设置为 display: grid，并使用 place-items 属性设置元素在网格中的位置，可以实现上下左右居中。

方法三：使用绝对定位与 transform通过将需要居中的元素设置为 position: absolute，并使用 top、left、right、bottom 等属性设置元素相对于容器的位置，然后使用transform 属性设置旋转角度，可以实现上下左右居中。

方法四：使用绝对定位与 margin:auto将需要居中的元素设置为 position: absolute，并使用margin-left、margin-right、margin-top、margin-bottom 设置为 auto，可以实现上下左右居中。

方法五：使用 position:relative 与 transform将需要居中的元素设置为 position: relative，并使用 transform 属性设置旋转角度和偏移量，可以实现上下左右居中。

CSS上下居中3种⽅案在CSS⾥不好使了,在CSS⾥解决上下居中问题⼜能⽀持both IE和Firefox的有3种⽅案:第⼀种,上下居中⽂字:⽅法是使⽤line-height,因为line-height就是⽤来定义⽂字⾏与⾏之间的距离,所以定义⽂字框的line-height等于框的⾼度可以让⽂字上下居中. h1 { font-size: 3em; height: 100px; line-height: 100px; }需要注意的是:如果中间的⽂字不只⼀⾏,并且使⽤分⾏显⽰的时候，这个就不好⽤了.第⼆种,⾮⽂字的上下居中:使⽤absolute positioning，需要注意的是这个⽅法只能在框有定义好的⾼度才能⼯作. 不适合动态⾼度的框.假如代码为:Hi, I'mVertically AlignedAbigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua.要上下居中 CSS编写为:.vert {width: 580px;height: 190px;position: absolute;top: 50%;left: 50%;margin: -95px 0 0 -290px;}上边的margin计算公式为:* Width of Element / 2 = Negative Left Margin* Height of Element / 2 = Negative Top Margin第三种⽅法:Content here#floater {float:left; height:50%; margin-bottom:-120px;}#content {clear:both; height:240px; position:relative;}。

设置div内容居中一、使用CSS的text-align属性。

text-align属性是CSS中用来控制文本水平对齐方式的属性，但它也可以用来实现div内容的水平居中。

我们只需要将div的display属性设置为block，然后将其父元素的text-align属性设置为center，就可以实现div内容的水平居中。

```css。

.parent {。

text-align: center;}。

.child {。

display: block;/ 其他样式 /。

}。

```。

通过上述代码，我们可以实现将子元素div的内容水平居中显示。

这种方法简单易行，适用于一些简单的布局需求。

二、使用CSS的flex布局。

flex布局是CSS3中新增的一种布局方式，它可以非常方便地实现元素的居中显示。

我们可以通过设置父元素的display属性为flex，然后使用justify-content和align-items属性来实现内容的水平和垂直居中。

```css。

.parent {。

display: flex;justify-content: center;align-items: center;}。

.child {。

/ 其他样式 /。

}。

```。

通过上述代码，我们可以实现将子元素div的内容水平和垂直居中显示。

flex布局具有强大的布局能力，适用于各种复杂的布局需求。

三、使用CSS的position属性。

position属性可以帮助我们实现元素的绝对定位，从而实现内容的居中显示。

我们可以通过将div的position属性设置为absolute，然后使用top、bottom、left和right属性来实现内容的水平和垂直居中。

```css。

.parent {。

position: relative;}。

.child {。

position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/ 其他样式 /。

css 水平垂直居中的方法宝子们，今天咱们来唠唠CSS里水平垂直居中这个事儿。

这可是在页面布局里超级实用的技能呢。

一、利用flex布局。

这就像魔法一样简单。

在父元素上设置display: flex; justify - content: center; align - items: center;就搞定啦。

比如说有个div是父元素，里面包着一个小盒子，给这个父div设置了这几个属性，那小盒子就稳稳地在父元素里水平垂直居中啦。

就好像把小盒子放在了父元素这个大舞台的正中央，它在那站得可稳了呢。

二、绝对定位和负边距。

先给要居中的元素设置position: absolute;然后呢，top: 50%; left: 50%;这时候元素的左上角就到了父元素的中心位置啦。

但是元素本身没有居中呀，所以再给这个元素设置margin - top和margin - left为自身高度和宽度一半的负值。

这就像是把元素从左上角拉回到正中心，不过这个方法有点小麻烦，得知道元素的宽高才行呢。

三、绝对定位和transform。

这个方法也很有趣哦。

同样先给元素设置position: absolute; top: 50%; left: 50%;然后呢，加上transform: translate(-50%, -50%);这个transform就像是一个小助手，它会自动根据元素的大小把元素从左上角拉回到正中心，而且不需要知道元素的宽高，是不是很方便呀。

四、表格布局法。

如果把父元素设置成display: table - cell;然后设置vertical - align: middle; text - align: center;子元素就会在父元素里垂直居中并且水平居中啦。

这就像是把父元素当成一个小格子，子元素乖乖地在格子中间待着。

宝子们，这些方法各有各的妙处呢。

在实际做页面的时候，就可以根据具体的情况来选择最适合的方法啦。

不管是简单的小页面，还是复杂的大项目，掌握了这些水平垂直居中的方法，都能让咱们的页面布局变得超级漂亮和整齐哦。

div里的内容居中首先，我们需要明确一点，要实现div里的内容居中，我们需要使用CSS来控制div元素内部内容的对齐方式。

在CSS中，有多种方法可以实现内容的居中，接下来将逐一介绍这些方法。

一种常见的方法是使用text-align属性。

这个属性可以控制元素内文本的水平对齐方式，通过将text-align设置为center，可以实现元素内文本的水平居中。

例如：```css。

div {。

text-align: center;}。

```。

这样就可以使div内部的文本内容水平居中显示。

但需要注意的是，这种方法只适用于内联元素和文本，对于块级元素内部的内容并不起作用。

如果需要对块级元素内部的内容进行居中，可以使用margin属性。

通过设置左右的外边距为auto，可以使块级元素内部的内容在水平方向上居中。

例如：```css。

div {。

margin: 0 auto;}。

```。

这样就可以实现块级元素内部内容的水平居中。

需要注意的是，这种方法只适用于具有指定宽度的块级元素，如果块级元素的宽度是自适应的，这种方法将不起作用。

除了水平居中，有时候我们还需要实现垂直居中。

对于内联元素和文本，可以使用line-height属性来实现垂直居中。

例如： ```css。

div {。

line-height: 200px; / 块级元素的高度 /。

height: 200px; / 块级元素的高度 /。

display: flex;justify-content: center;align-items: center;}。

```。

这样就可以使div内部的文本内容垂直居中显示。

需要注意的是，这种方法只适用于单行文本，对于多行文本并不适用。

对于块级元素内部的内容，可以使用CSS3的新特性flexbox来实现垂直居中。

通过设置父元素为flex布局，并设置align-items为center，可以实现块级元素内部内容的垂直居中。

例如：```css。

css实现水平垂直居中的6种方式在网页设计中，实现元素的水平垂直居中是一项常见的需求。

本文将介绍六种不同的CSS方式来实现这一目标，每种方式都有各自的优缺点，希望能够帮助读者选择适合自己项目的方法。

1. 使用Flexbox布局Flexbox是CSS3中引入的一种强大的布局模式，它可以轻松实现元素的垂直和水平居中。

只需将容器的display属性设置为flex，并使用align-items和justify-content属性来调整元素的位置即可。

这种方式简单方便，兼容性较好，特别适用于排列多个元素的布局。

2. 使用绝对定位和负边距这种方法通过将元素的位置设置为绝对定位，并使用负边距的方式来实现居中。

首先，将元素的position属性设置为absolute，然后使用top、bottom、left和right属性将元素定位到父容器的中间位置。

这种方法适用于需要在页面中间显示的单个元素，但在处理动态内容时可能会出现问题。

3. 使用transform属性transform属性可以用来对元素进行旋转、缩放和平移等操作，其中，translate属性可以实现元素的平移。

通过将元素的位置设置为相对定位，然后使用translate属性将元素平移一定的距离，即可实现水平垂直居中。

这种方法适用于需要在页面中间居中显示的单个元素，但在某些浏览器上可能存在兼容性问题。

4. 使用table和table-cell布局CSS的table和table-cell属性可以模拟表格的布局方式，实现元素的水平垂直居中。

将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align和text-align属性来调整元素的居中效果。

这种方法简单易用，兼容性较好，但需要注意的是，使用表格布局可能会导致一些语义上的问题。

5. 使用CSS网格布局CSS网格布局是一种以网格的形式来排列和定位元素的布局方式。

css居中布局的⼏种⽅式⼀、⽔平居中若是⾏内元素，则直接给其⽗元素设置text-align: center即可若是块级元素，则直接给该元素设置margin: 0 auto即可若⼦元素包含浮动元素，则给⽗元素设置width:fit-content并且配合margin.parent {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;margin: 0 auto;}使⽤flex布局的⽅式，可以轻松实现⽔平居中，即使⼦元素中存在浮动元素也同样适⽤// flex 2012年版本写法.parent {display: flex;flex-direction: row;justify-content: center;}// flex 2009年版本写法.parent {display: box;box-orient: horizontal;box-pack: center;}使⽤绝对定位的⽅式，再配合CSS3新增的transform属性.child {position: absolute;left: 50%;transform: translate(-50%, 0);}使⽤绝对定位的⽅式，再配合left:0;right:0;margin:0 auto;(此⽅法需要固定宽度).child {position: absolute;left: 0;right: 0;margin: 0 auto;width: 200px; // 假定宽度为200px}⼆、垂直居中若元素是单⾏⽂本，则直接给该元素设置line-height等于其⽗元素的⾼度若元素是⾏内块级元素，可以配合使⽤display:inline-block;vertical-align:middle和⼀个伪元素来让内容块居中.parent::after, .child {display: inline-block;vertical-align: middle;}.parent::after {content: "";height: 100%;}使⽤vertical-align属性并且配合使⽤display:table和display:table-cell来让内容块居中.parent {display: table;}.child {display: table-cell;vertical-align: middle;}使⽤flex布局的⽅式，可以轻松实现垂直居中，即使⼦元素中存在浮动元素也同样适⽤// flex 2012年版本写法.parent {display: flex;align-items: center;}// flex 2009年版本写法.parent {display: box;box-orient: vertical;box-pack: center;}使⽤绝对定位的⽅式，再配合CSS3新增的transform属性.child {position: absolute;top: 50%;transform: translate(0, -50%);}使⽤绝对定位的⽅式，再配合负值的margin-top(此⽅法需要固定⾼度).child {position: absolute;top: 50%;height: 200px; // 假定⾼度为200pxmargin-top: -100px; // 负值的绝对值为⾼度的⼀半}使⽤绝对定位的⽅式，再配合top:0;bottom:0;margin:auto 0;(此⽅法需要固定⾼度).child {position: absolute;top: 0;bottom: 0;margin: auto 0;height: 200px; // 假定⾼度为200px}三、⽔平垂直居中使⽤flex布局的⽅式同样可以轻松实现⽔平垂直居中// flex 2012年版本写法.parent {display: flex;justify-content: center;align-items: center;}// flex 2009年版本写法.parent {display: box;box-pack: center;box-align: center;}使⽤绝对定位的⽅式，再配合CSS3新增的transform属性.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}使⽤绝对定位的⽅式，再配合使⽤负值的margin-top和负值的margin-left(此⽅法需要同时固定宽度和⾼度) .child {position: absolute;left: 50%;top: 50%;margin-top: -50px; // 负值的绝对值为⾼度的⼀半margin-left: -100px; // 负值的绝对值为宽度的⼀半width: 200px; // 假定宽度为200pxheight: 100px; // 假定⾼度为100px}。

css居中的几种方法CSS居中的几种方法。

在网页设计中，居中是一个常见的需求。

无论是文字、图片还是整个元素，都可能需要在页面中水平或垂直居中。

在CSS中，实现居中有多种方法，接下来我们将介绍几种常用的CSS居中方法。

1. 文字水平居中。

要让文字水平居中，可以使用text-align属性。

将text-align设置为center即可实现文字的水平居中。

例如：```css。

.center {。

text-align: center;}。

```。

通过给父元素添加.center类，其内部的文字就会水平居中显示。

2. 元素水平居中。

对于块级元素，可以使用margin属性来实现水平居中。

假设要将一个div元素水平居中显示，可以使用如下的CSS代码：```css。

.center {。

width: 200px;margin: 0 auto;}。

```。

这里设置了元素的宽度，并将左右外边距设为auto，这样就可以实现元素的水平居中。

3. 元素垂直居中。

实现元素的垂直居中相对复杂一些，但也有多种方法可以实现。

其中一种常见的方法是使用flex布局。

例如：```css。

.container {。

display: flex;justify-content: center;align-items: center;height: 300px;}。

这段CSS代码将容器设置为flex布局，然后通过justify-content和align-items属性将内部元素水平和垂直居中。

4. 绝对定位居中。

另一种常见的元素垂直居中方法是使用绝对定位。

可以通过如下的CSS代码实现：```css。

.center {。

position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);```。

这段代码将元素的位置设置为绝对定位，然后通过top: 50%和left: 50%将元素的左上角移动到父元素的中心，最后使用transform属性将元素在水平和垂直方向上平移自身宽高的一半，从而实现元素的居中显示。

DIV+CSS中让布局、背景图⽚、⽂字内容居中的⽅法 在DIV CSS布局的页⾯⾥，从布局内容到页⾯⾥⽂章⽂字居中都是⾮常重要的，⽽css来设置居中也是⾮常简单的。

1、⾸先介绍使⽤css属性让整体布局的居中： 设置对象的⽗级内容居中，这⾥⼀个页⾯的为⽗级是什么呢？我们可以想象整个页⾯的内容是由<html></html>和<body> </body>这两个包含，那根据较近⽗级我们就设置body的CSS来实现居中问题，可以向在内容⾥居中有text-align:center;具体css的居中代码为： body{text-aligh:center; } 但是即使这样也会出现问题，因为你没有设置布局有多宽“width ”，⼀旦你内容布局中在最外层css控制中，设置了float:属性，那布局将会向你设置的float:⽅向靠，解决⽅法，除了设置body的居中的css属性外，还需对布局对象设置居中，⽽且或定义宽度是多少，假如⽹页宽度为700px，最外层css样式为的class="weicheng"，那设置应该这样“.weicheng{margin:0 auto; width:700px;} ”即可⽽这个元素在IE下有⽤，经过试验在⽕狐等浏览器下只除了此⽗级（body）设置text-aligh:center;居中是⽆法让布局居中，那我们还需要对该对象设置个“margin:0 auto ; ”这个是什么意思呢，意思是内容上下为0距离，⽽左右为“auto ”⾃动，这样就可以设置实现⽹页布局居中(这⾥设置margin:5px auto; ⼀样效果不影响实验)。

完整实例为（可将代码拷贝新建html⽂件浏览观看效果）：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.jb51.nte的CSS div的布局居中实例</title> <style type="text/css"> <!-- body{ text-align:center; } .waicheng {color: #0066CC; margin:5px auto; width:700px;height:200px; border:1px solid #000000;} --> </style> </head> <body> <div class="waicheng">我是css中的居中的实验;我的布局外层有⼀个边为1px⿊⾊边，我宽700px，⾼为200px,设置了与顶部内容距离为5PX</div> </body> </html> 2、介绍使⽤css属性让⽹页的背景居中： 这⾥居中就包括了左右居中与上下居中，居中代码如下： 3、css让介绍⽂字、图⽚内容左右上下居中⽅法教程： 我们知道左右就中好办，直接⽤text-align:center; 即可让⽂字与图⽚内容居中，但是垂直呢，假如我们在⾼度为120px的⾼度下垂直居中，图⽚居中是vertical-align:middle;css属性，⽂字居中就要靠设置⾏⾼⽅法居中⽂字内容，这⾥我们设置为120px的⾼度这需要设置个line-height:120px;这样就通过css属性类样式来实现⽂字与图⽚的上下左右居中。

CSS实现DIV居中的三种⽅法下⾯给⼤家分享div居中的实现代码，具体代码如下所⽰：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>demo</title></head><body><style type="text/css">.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; height: 40px; background-color: green;}</style><div class="div1"><div class="div2"></div></div></body></html>如上的两个div，实现div2在div1⾥⾯是居中显⽰⼀、⽅法⼀ 利⽤margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30 div1的⾼减去div2的⾼就是div2margin-top的数值：（100-40）/2=30<!DOCTYPE html><html><head><meta charset="UTF-8"><title>demo</title></head><body><style type="text/css">.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; height: 40px; background-color: green;}.div22{margin-left: 30px;margin-top: 30px;}</style><div class="div1"><div class="div2 div22"></div></div></body></html>⼆、⽅法⼆ 利⽤css的 position属性，把div2相对于div1的top、left都设置为50%，然后再⽤margin-top设置为div2的⾼度的负⼀半拉回来，⽤marg-left设置为宽度的负⼀半拉回来，css如下设置<!DOCTYPE html><html><head><meta charset="UTF-8"><title>demo</title></head><body><style type="text/css">.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; height: 40px; background-color: green;}.div11{position: relative;}.div22{position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px; }</style><div class="div1 div11"><div class="div2 div22"></div></div></body></html>三、⽅法三 还是⽤css的position属性，如下的html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>demo</title></head><body><style type="text/css">.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; height: 40px; background-color: green;}.div11{position: relative;}.div22{position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;}</style><div class="div1 div11"><div class="div2 div22"></div></div></body></html>四、⽅法四 利⽤css3的新增属性table-cell<!DOCTYPE html><html><head><meta charset="UTF-8"><title>demo</title></head><body><style type="text/css">.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; height: 40px; background-color: green;}.div11{display: table-cell;vertical-align: middle;}.div22{margin: auto;}</style><div class="div1 div11"><div class="div2 div22"></div></div></body></html>这个⽅法还有⼀个好处就是，div2的⾼度可以不固定，如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title>demo</title></head><body><style type="text/css">.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; background-color: green;}.div11{display: table-cell;vertical-align: middle;}.div22{margin: auto;}</style><div class="div1 div11"><div class="div2 div22">div居中⽅法</div></div></body></html>总结以上所述是⼩编给⼤家介绍的CSS实现DIV居中的三种⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

css居中方法在网页设计中，常常需要对页面中的各个元素进行居中处理，以保证页面的美观性和可读性。

在CSS中，提供了多种方式来实现元素的居中处理，本文将介绍其中的几种方法。

一、水平居中1.1 text-aligntext-align属性可以实现文本的水平居中，它可以应用于块级元素和行内元素，但是对于行内块元素需要特别注意。

它有以下几种取值：（1）left：左对齐；（2）right：右对齐；（3）center：居中对齐；（4）justify：两端对齐。

例如：```<div style='text-align:center'>居中文本</div>```1.2 margin和width如果要实现一个块级元素的水平居中，可以通过设置margin-left和margin-right为auto，同时设置width的值来实现。

例如：```<div style='width:200px;margin:0 auto;'>居中元素</div> ```1.3 transformtransform属性可以实现元素的平移、旋转、缩放等效果，其中translateX函数可以实现元素的水平平移。

例如：```<div style='transform:translateX(50%);'>居中元素</div> ```二、垂直居中2.1 line-heightline-height属性可以实现行内元素的垂直居中，它可以设置为与元素高度相同的值，例如：```<span style='display:inline-block;line-height:50px;'>垂直居中元素</span>```2.2 display和vertical-align如果要实现行内块元素的垂直居中，可以通过设置display为inline-block，同时设置vertical-align为middle来实现。

前端居中的15种方法一、介绍在前端开发中，经常会遇到需要居中显示元素的情况，无论是居中文本内容、图片还是容器本身，合适的居中方式可以提升页面的美观度和用户体验。

本文将介绍前端居中的15种常用方法，帮助你轻松处理各种居中需求。

二、水平居中2.1 使用文本对齐属性通过将父容器的text-align属性设置为center，可以实现子元素的水平居中。

<div style="text-align: center;"><p>This is a centered text.</p></div>2.2 使用Flexbox布局Flexbox布局是一种强大的布局模型，可以很方便地实现水平居中。

<div style="display: flex; justify-content: center;"><p>This is a centered text with Flexbox.</p></div>2.3 使用绝对定位和负边距我们可以通过将子元素设置为绝对定位，并利用负边距将其居中。

<div style="position: relative;"><p style="position: absolute; left: 50%; transform: translateX(-50%);">This is a centered text with absolute positioning.</p></div>三、垂直居中3.1 使用Flexbox布局Flexbox布局不仅可以实现水平居中，还可以很方便地实现垂直居中。

<div style="display: flex; align-items: center;"><p>This is a vertically centered text with Flexbox.</p></div>3.2 使用绝对定位和负边距类似于水平居中，我们可以使用绝对定位和负边距来实现垂直居中。

⼿把⼿教你CSS⽔平、垂直居中的10种⽅式（⼩结）⾯试必备，⼯作⼀定会⽤到。

emmm⼤家都懂的，话不多说，先直接贴⼀个总结和效果图。

总结PC端有兼容性要求，⼦元素宽⾼固定，推荐absolute + 负marginPC端有兼容要求，⼦元素宽⾼不固定，推荐absolute + transformPC端⽆兼容性要求，推荐flex移动端推荐使⽤flex要怎么实现上⾯这幅图的效果呢，下⾯为⼤家总结了10中常⽤的⽅法。

⾸先我先创建⼀个公共的模板样式<template><div class="two"><div class="parent"><div class="child">123</div></div></div></template><style lang="less" scoped>.parent{margin: 0 auto;width: 300px;height: 300px;border: 1px solid red;box-sizing: border-box;.child {height: 100px;width: 100px;background: #2f8df0;}}</style>然后具体⽤到的样式单独写在⽅法⾥⾯，⾸先先介绍4个平时布局的技巧。

1.⽔平居中div⾥⾯的div，设置⼦元素的宽度。

.parent{width:300px;margin:0 auto;}注意：如果⼦元素设置了display:table-cell，那么margin:0 auto;将会失效。

2.设置⽂字垂直居中，设置包含⽂字div的⾼。

.child{text-align：centerline-height:100px //知道⼦元素的⾼,设置和⾼⼀样的⾼度}3.两个或者多个块级元素垂直居中对齐，⽗元素设置height和line-height相等。

【基础】CSS居中的15种⽅式简⾔CSS居中是前端⼯程师经常要⾯对的问题，也是基本技能之⼀。

今天有时间把CSS居中的⽅案汇编整理了⼀下，⽬前包括⽔平居中，垂直居中及⽔平垂直居中⽅案共15种。

如有漏掉的，还会陆续的补充进来，算做是⼀个备忘录吧。

1 ⽔平居中1.1 内联元素⽔平居中利⽤text-align: center可以实现在块级元素内部的内联元素⽔平居中。

此⽅法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素⽔平居中都有效。

** 核⼼代码：**.center-text {text-align: center;}** 演⽰程序：**1.2 块级元素⽔平居中通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素⽔平居中。

** 核⼼代码：**.center-block {margin: 0 auto;}** 演⽰程序：**1.3 多块级元素⽔平居中1.3.1 利⽤inline-block如果⼀⾏中有两个或两个以上的块级元素，通过设置块级元素的显⽰类型为inline-block和⽗容器的text-align属性从⽽使多块级元素⽔平居中。

** 核⼼代码：**.container {text-align: center;}.inline-block {display: inline-block;}** 演⽰程序：**1.3.2 利⽤display: flex利⽤弹性布局(flex)，实现⽔平居中，其中justify-content⽤于设置弹性盒⼦元素在主轴（横轴）⽅向上的对齐⽅式，本例中设置⼦元素⽔平居中显⽰。

** 核⼼代码：**.flex-center {display: flex;justify-content: center;}** 演⽰程序：**2 垂直居中2.1 单⾏内联(inline-)元素垂直居中通过设置内联元素的⾼度(height)和⾏⾼(line-height)相等，从⽽使元素垂直居中。