css样式居中垂直居中,css元素垂直居中

CSS居中方案大全

如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客

在这里总结一下CSS水平居中、垂直居中的各种方式。应该说非常全了。

总览一下：

用法：在父级元素的样式中添加 text-align:center

效果图：

用法：在元素样式添加 margin:0 auto ，使其margin-left和margin-right平分块级元素那一行剩余的宽度。

效果图：

当然如果你的块级元素没有设置width，那么div就会占满一行，也就没有水平居中的说法了。

如果由多个块级元素，则可以使用 inline-block 配合 text-align:center ，将 inline-block 写在需要居中的元素样式上, text-align:center 写在父级元素上。

效果图：

使用flex也可以轻松做到多个块级元素水平居中

用法：在父级元素样式增加 display: flex justify-content: center

效果图与第三个一样。

当然，多个块级元素能用的居中方法，在单个块级元素上也同样可以使用。

使用 display:table 配合 margin:0 auto ，可以达到不定宽块级元素居中效果。

效果图：

使用绝对定位给元素一个left:50%，然后再加一个margin-lelt:-(宽度的一半)

效果图：

不过缺点很明显，就是你知道元素宽度而且得固定不变，所以是比较蠢的一种写法。

效果图：

效果图：

这个方法和水平居中的第6个方法一样，就不多说了。

效果图：

这个和水平居中的第7个方法一样，我也就不多说了。

效果图：

效果图：

效果图：

缺点也比较明显，需要计算。

效果图：

效果图：

效果图：

需要在html中加入 table 标签，比较低效，我就不详写了，想了解的朋友可以Google搜索一下。

如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客

相关问答

Q1: css水平居中和垂直居中怎么设置

采用css的flex布局实现最为简单有效。display: flex

        

div class="box"

           

 div class="item"我要居中/div

      

  /div

        

.box {

            

display: flex;

            

width: 200px;

            

height: 200px;

            

justify-content: center; // 水平居中

            

align-items: center; // 垂直居中

       

 }

Q2: 怎么使用CSS让图片水平垂直都居中？

CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。

新建一张文档

在桌面新建一张文本文档，改名为1.txt，如下图所示：

基础代码

然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：

后缀名

然后把文本文档后缀名改为.html，如下图所示：

运行网页

然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示：

CSS代码

然后写上CSS代码，如下图所示：

垂直水平居中

可以看到图片已经垂直和水平居中，如下图所示：

总代码

!DOCTYPE html

head

titlehtml/title

style type="text/css"

.picTiger{

margin: auto;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

/style

/head

body

img class="picTiger" src="C:/Users/Administrator/Desktop/1.jpg"

/body

html

Q3: CSS实现垂直居中的7种方法

HTML：

CSS：

重点：父容器高度和子元素line-height一样的数值，内容中的行内元素就会垂直居中。

HTML：

CSS：

重点：给父元素添加一个伪元素::before，让这个伪元素的div高度为100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。

HTML：

CSS：

重点：在父元素中设置相对定位position: relative，子元素设置绝对定位 position: absolute；top和left相对父元素的50%，与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。

HTML：

CSS：

重点：子元素绝对定位position:absolute,父元素相对定位position: relative，将上下左右的数值都设置为0，同时margin:auto。绝对定位是会脱离文档流的，这点要注意一下。

HTML：

CSS：

重点：给父元素设置display: flex布局，水平居中 justify-content: center，垂直居中align-items: center。

HTML：

CSS：

重点：父元素position定位为relative，子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。

HTML：

CSS：

重点：将父元素设置display:table，子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。

Q4: CSS文字垂直居中

01

先写上html代码，如图，内容很简单，就是一个div里有一段文本。

02

再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。

03

如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。

04

要让文本水平居中，我们可以添加样式：text-align: center;

要让文本垂直居中，我们可以添加样式： vertical-align: middle;和display: table-cell;

05

添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。

Q5: CSS水平居中与垂直居中的总结

1. 设置 margin: 0 auto;

单行文本垂直居中，通过设置行高为父元素高度（父元素高度已知）。

图片垂直居中，设置上下padding（父元素高估不设置）。

图片垂直居中，下边这种方法会有一定偏差（父元素高估不设置）。

图片垂直居中，图片作为背景。

1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

行内元素可可以转换为inline-block实现居中。