css上下居中怎么设置,css设置上下左右居中显示
css中4种方法使内容居中
通常首选方法是使用 flexbox 居中内容。只需三行代码即可： display:flex ，然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码：
html：
css：
使用grid(网格)与flexbox非常相似，也是一种常见的技术，尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码：
html:
css:
使用css transform 居中元素，前提是容器元素必须设置为 position:relative ，然后子元素使用 left:50%和 top:50% 偏移子元素，最后使用 translate（-50%，-50%） 以抵消其偏移的位置。
代码如下：
html：
css：
最后，表格居中是一种旧技术，在使用旧浏览器时，您可能会喜欢这种技术。前提是容器元素设置为 display:table ，然后子元素设置为 display: table-cell ，最后使用 text-align: center 水平居住和 vertical-align: middle 垂直居中。
代码如下：
html：
css:
css上下居中怎么弄
第一种方法：
vertical-align：垂直对齐
middle 居中 top 上对齐 bottom 下对齐
第二种方法：
style{
height:20px;
line-height:20px;
}
Css实现元素上下左右都居中的4种方法
例：居中.wrapper里的.content
一. 已经元素的宽高的前提下：
(1)? left:50%;top:50%
父元素设置相对定位，position: relative;?
子元素(要居中的元素)设置绝对定位，position: absolute;? left: 50%;? ?top: 50%
（2）设置margin: auto;
父元素设置相对定位,position: relative;
子元素(要居中的元素)设置绝对定位，position: absolute; margin: auto
(3)? ?flex布局
父元素设置 display: flex;? justify-content: center;? ?align-items: center;
二.未知元素宽高的情况下：
（1）四个方向设置值，把元素撑开
父元素设置相对定位，position: relative;?
子元素设置绝对定位，position: absolute; top与bottom设置一样的值，left与right设置一样的值，把容器撑开
css字体上下居中怎么设置
1、可设置行高line-height和height的高度一致，如div {height:100px;line-height:100px;}
2、或者设置display：table-cell和vertical-align:middle; 如：div {display:table-cell; vertical-align: middle}
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代码--
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;。