css 上下居中 CSS居中

大家好，关于css 上下居中很多朋友都还不太明白，今天小编就来为大家分享关于CSS居中的知识，希望对各位有所帮助！

CSS 一个DIV里面的文字如何上下左右居中显示

这样：

body{ margin:0; padding:0; width:100%;

height:100%;

} div{ position:absolute; top:50%; left:50%; margin-top:-250px;margin-left:-250px;/*此时宽和高都要固定*/ width:500px; height:500px;} body{

margin:0;

padding:0;

width:100%;

height:100%;

}

div{

position:absolute;

top:50%;

left:50%;

margin-top:-250px;

margin-left:-250px;

/*此时宽和高都要固定*/

width:500px;

height:500px;

}

扩展资料：注意事项

一、用两个值就可以了

1、text-align:center;

//这是让文字左右居中

2、line-height:100px;

//这是让文字垂直居中

vertical-align:middle;

//这个属性不能让文字垂直居中，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

二、多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

1、父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

<!--html代码-->

<div id="div1">

这是多行文本垂直居中，

这是多行文本垂直居中，

这是多行文本垂直居中，

这是多行文本垂直居中。

</div>

/*css代码*/

#div1{

width: 300px;

margin: 50px auto;

border: 1px solid red;

text-align: center;/*设置文本水平居中*/

padding: 50px 20px;

}

2、父级元素高度固定

只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此可以设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。

css 怎么实现 div水平居中 呢

因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。

1、新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时可以发现div靠近浏览器的左侧，文字在div中居中：

2、为div标签添加新的外边距“margin”属性，属性值为“0 auto”，“0”指的是上下外边距为0，“auto”指的是左右外边距为自适应：

3、这时无论浏览器的宽度是多少，div都会在浏览器上水平居中：

Div+Css如何实现整体居中

主要的样式定义如下：

body{TEXT-ALIGN: center;}

#center{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto;}

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。

解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto;”

需要说明的是，如果想用这个方法使整个页面要居中，建议不要套在一个DIV里，可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto;就可以了。

文章到此结束，如果本次分享的css 上下居中和CSS居中的问题解决了您的问题，那么我们由衷的感到高兴！