CSS水平居中的9种方法

容器的居中显示在网页设计中是很常见的，居中显示可以获得视觉的焦点，是内容更加突出，下面就简单的说明一下如何在HTML中通过样式的控制来实现

公司主营业务：网站设计制作、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出南华免费做网站回馈大家。

01

最常见的一种，代码示例如下图，首先，取big一半像素大小赋给small层，通过margin: 0 auto; text-align: center来实现

02

第二种方法，代码示例如下图，将big层的display设置为table-cell,然后small层的margin-left取（500-250）/2，也就是125即可

03

第三种方法，代码示例如下图，将big层的position设置为absolute，然后small层的margin-left取（500-250）/2，也就是125即可

04

第四种方法，通过display:flex实现，代码示例如下图，big层display:flex;flex-direction:column;而small层align-self:center

05

第五种方法，在small层的宽度没有的时候，可以通过width:fit-content这个设置来完成，代码示例如下

06

第六种方法，通过display:inline-block来实现，将这个设置赋给big层即可，代码示例如下图

07

第七种方法，设置big层position:relative，相对情况下，使small层左浮动，代码示例如下

08

第八种方法，transform属性，代码示例如下

09

第九种方法，借助第三方样式，比如增加一个add节点，水平浮动向左，使small层随之浮动，代码示例如下

特别提示

每种方法都适应不同的运行环境，实际操作时需要考虑不同浏览器的解析时的兼容性

如何通过css设置表格居中

做法如下： 1.为表格(table标签)设置一个具体的宽度

2.添加一个属性 margin: 0 auto;

具体代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta http-equiv="x-ua-compatible" content="IE=edge"/

titleHello, HTML5/title

style

/* 在此处填写叠层样式 */

body, html{

height: 100%;

width: 100%;

margin: 0; padding: 0;

}

table {

height: 80%;

width: 80%; /* 必须设置一个宽度， margin: 0 auto才能使之居于父组件中央*/

margin: 10px auto; /* 通过设置外边距（margin）中的左右外边距属性为auto使之居于父组件（body）中间*/

}

table tr{

height: 40px;

width: 100%;

background-color: red;

}

tabletrtd{

height: 100%; width: 33.3%;

background-color: red;

}

/style

script

/* 在此处填写JavaScript代码 */

/script

/head

body

table

tr

[img]

css怎样让div里的表格居中对齐

css让div里的表格居中对齐的方法有很多，可以改变改变表格的样式属性，也可以通过改变div的样式属性，这里介绍通过改变表格的样式属性使表格居中，这样不会改变div里除表格的其他元素的样式属性和位置。以下演示具体步骤：

1、打开HTML文件编辑器，新建一个HTML文件并添加HTML的基本元素标签。

2、添加好基本元素标签后在body里添加div元素，然后在div元素里面添加一个表格元素。

3、接下来配置div元素样式和表格元素样式，使得效果可以明显体现出来，这里使用的是行内式，也可以使用行外式和外部式。其中核心代码都是：margin：auto。

4、保存好后运行这个HTML文件。效果如图：

css怎么设置居中

水平居中

若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.

若是块级元素, 该元素设置 margin:0 auto即可.

若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

.parent{

width: -moz-fit-content;

width: -webkit-fit-content;

width:fit-content;

margin:0 auto;}

使用flex 布局, 可以轻松的实现水平居中, 子元素设置如下:

.son{

display: flex;

justify-content: center;}

使用CSS3中新增的transform属性, 子元素设置如下:

.son{

position:absolute;

left:50%;

transform:translate(-50%,0);}

使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:

.son{

position:absolute;

width:固定;

left:50%;

margin-left:-0.5宽度;}

使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:

.son{

position:absolute;

width:固定;

left:0;

right:0;

margin:0 auto;}

垂直居中

若元素是单行文本, 则可设置 line-height 等于父元素高度

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

.parent::after, .son{

display:inline-block;

vertical-align:middle;}.parent::after{

content:'';

height:100%;}

元素高度不定

可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

用 Flex 布局

.parent {

display: flex;

align-items: center;}

可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:

.son{

position:absolute;

top:50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);}

元素高度固定

设置父元素相对定位(position:relative), 子元素如下css样式:

.son{

position:absolute;

top:50%;

height:固定;

margin-top:-0.5高度;}

设置父元素相对定位(position:relative), 子元素如下css样式:

.son{

position:absolute;

height:固定;

top:0;

bottom:0;

margin:auto 0;}

css如何将整个表格设置居中？

做法如下：    1.为表格(table标签)设置一个具体的宽度

2.添加一个属性 margin: 0 auto;

具体代码如下：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta http-equiv="x-ua-compatible" content="IE=edge"/

titleHello, HTML5/title

style

/*  在此处填写叠层样式  */

body, html{

height: 100%;

width: 100%;

margin: 0; padding: 0;

}

table {

height: 80%;

width: 80%;         /*  必须设置一个宽度， margin: 0 auto才能使之居于父组件中央*/

margin: 10px auto;  /*  通过设置外边距（margin）中的左右外边距属性为auto使之居于父组件（body）中间*/

}

table tr{

height: 40px;

width: 100%;

background-color: red;

}

tabletrtd{

height: 100%; width: 33.3%;

background-color: red;

}

/style

script

/*  在此处填写JavaScript代码   */

/script

/head

body

table

tr

td12/td

td12/td

td12/td

/tr

tr

td/td

td/td

td/td

/tr

tr

td/td

td/td

td/td

/tr

/table

!-- 在此处编写HTML页面  --

/body

/html

怎么样把table表格使用css样式居中显示

1、普通居中。

align="center"

table align="center"

tr

td商品名称/td

td商品价格/td

td商品描述/td

td购买/td

/tr

/table

2、css样式居中。

margin:0 auto

style type="text/css"

table1{

margin:0 auto;/* 自动居中，不论王爷的大小 */

border:1;/* 边框粗度 */

width:80%;/* 宽度只占当前页面的80% */

}

/style

标题名称：css列表样式如何居中,CSS表格居中
转载来源：http://azwzsj.com/article/dsopjsh.html