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

html-css014

CSS 一个DIV里面的文字如何上下左右居中显示?,第1张

这样:

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

height:100%

}div{position:absolutetop:50%left:50%margin-top:-250px margin-left:-250px/*此时宽和高都要固定*/width:500pxheight: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代码-->

<divid="div1">

这是多行文本垂直居中,

这是多行文本垂直居中,

这是多行文本垂直居中,

这是多行文本垂直居中。

</div>

/*css代码*/

#div1{

width:300px

margin:50pxauto

border:1pxsolidred

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

padding:50px20px

}

2、父级元素高度固定

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

position 的四个属性:static、absolute、relative、fixed

static:默认值

absolute:脱离文档结构,导致父元素坍塌;相对于最近的非static元素进行定位;使得inline元素被“块”化;使得元素已有的float失效。多个悬浮元素,后来者在上方;

relative:根据原来位置,导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。

产生新的定位上下文,影响子元素(如absolute属性元素定位)

fixed:根据浏览器确定位置

参考文章:https://www.cnblogs.com/wangfupeng1988/p/4322680.html

css原理:

vertical-align :指定行内元素(inline)和行内块级元素(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。

文本垂直居中:

单行文本:设置line-height 和区域高度height 一致即可

多行文本垂直居中:

1、父级元素高度不固定,随内容变化:内填充padding-top = padding-bottom

2、父级元素高度固定:

父元素div:display:table

子元素div:display:table-cell;vertical-align:middle

子div垂直居中:

1、子div具体大小设置偏移

2、利用transform:translateX(-50%)translateY(-50%)

3、利用绝对布局absolute

4、利用vertical-align属性实现子div大小不固定垂直居中

5、利用display:flex:

justify-content: center/*实现水平居中*/

align-items:center/*实现垂直居中*/

参考链接:https://blog.csdn.net/u014607184/article/details/51820508

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。

每行文字都有一个line boxes包裹,具体大小由line boxes决定。其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline boxes干的,这些手下就是文字啦,图片啊,span之类的inline属性的标签啦。

line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span style="line-height:20px">取手下line-height<span style="line-height:40px">最高</span>的值</span>。则line boxes的高度就是40像素了。

参考 http://www.zhangxinxu.com/wordpress/?p=384