div居中对齐的css代码

⑴ CSS怎样让一个div居中

第一种方式:设置body
居中。在CSS中的代码是(body{text-align:center;})
第二种方式:用盒子模型，首先设置一个Div
，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下:
<div
class="div1">
<div
class="div2"></div>
</div>
CSS
样式代码:
<style
type="text/css">
.div1{text-align:center;width:100%;}
.div2{width:980px;background:red;}
//为了看清效果，加了背景颜色
</style>
第三种方式:margin:0
auto;

⑵ css 怎么实现 div水平居中 呢

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

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

⑶ 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;

}

(3)div居中对齐的css代码扩展阅读：

注意事项

一、用两个值就可以了

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;。

⑷ htmlcss里面一个div里的ul怎么让他居中对齐

1、首先先打开我们的开发环境新建一个web项目。

2、在html中引入css文件这里是html页面的代码div和ul。

3、将所有标签的margin和padding初始为0然后将父级div的display设置为flexalign-items设置为center。

4、运行web项目后得到的结果如图所示垂直居中了。

5、将display设置为table-cell，将vertical-align设置为middle即可。

6、将ul的高度设置为百分比然后使用相对定位设置top为二分之一的百分之百减去ul的高度即可。

7、使用line-height将其设置div的高度必须是确定值，然后将li左或者右浮动即可。

⑸ 如何使文字在div中水平和垂直居中的css代码，<div>水平垂直居中</div>

使文字在div中水平和垂直居中的的css样式为

text-align:center;/*水平居中*/
line-height:20px;/*行距设为与div高度内一致容*/

示例如下：

1. HTML元素

   <div>水平垂直居中</div>

2. css样式

   div{
   	width:200px;height:200px;/*设置div的大小*/
   	border:1pxsolidgreen;/*边框*/
   	text-align:center;/*文字水平居中对齐*/
   	line-height:200px;/*设置文字行距等于div的高度*/
   	overflow:hidden;
   }

3. 显示效果

   

⑹ CSS div居中的几种方法

CSS实现div垂直居中的方法有很多，下面div居中的几种方法是自己平时写网页中经常用到的，最常见的例子就是登录注册弹出框。

方法一：对div使用绝对布局position:absolute;并设置top，left，right，bottom的值相等，但不一定都等于0；并且设置margin:auto。

方法二：这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute;并把top和left的值都设置为50%；50%就是指页面窗口的宽度和高度的50%；最后将div左移和上移，左移和上移的大小为div宽度和高度的一半。

其中 margin-left：-100px 和 margin-top：-100px 可以写成 margin：-100px  0px  0px  -100px

方法三：div使用绝对定位position：absolute，并且设置left和top的值都为50%。使用css3的transform属性。transform：translate（-50%，-50%）。

以上3种方法的效果如下显示

若有两个div，里面小的div相对于外面大的div水平垂直居中对齐，有以下几种方法。

方法一：利用position和margin：auto实现。父元素设置position：relative；子元素设置position：absolute，并设置top，left，right，bottom值相等。

方法二：使用position。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%，并设置左移和上移为子元素的大小的一半。

方法三：使用display：flex。这种方法需要设置浏览器的兼容性。

方法四：使用transform：translate（）。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%。最后设置transform：translate（-50%，-50%）。

以上四种方法的效果图如下显示

今天就跟大家分享这么多~如果你有更好的方法，请在下方留言

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

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

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