程序博客网 > 爱淘宝红包返利

css的居中如何实现？

来源：互联网发布：爱淘宝红包返利编辑：程序博客网时间：2024/05/16 22:34

在css进行布局的时候，会经常出现让div居中，div内容居中， div图片居中， css垂直居中，

1.div居中

通过对body设置text-align:center，再对div设置margin：0 auto使div居中。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>居中</title>

<style type="text/css">

body{

text-align:center

}

.div1{

width: 400px;

height: 100px;

border: 1px solid red;

margin: 0 auto;

}

</style>

</head>

<body>

<div class="div1">

</div>

</body>

</html>

运行结果：

2.div内容居中

通过设置text-align: center使div内容居中,包括div内部css字体，图片水平居中

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>居中</title>

<style type="text/css">

.div1{

width: 400px;

height: 100px;

border: 1px solid red;

text-align: center;

}

</style>

</head>

<body>

<div class="div1">

div内容居中

</div>

</body>

</html>

3.css垂直居中

设置line-heigh（行高）和height（高）值相同，可以实现css垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>居中</title>

<style type="text/css">

body{

text-align: center;

}

.div1{

width: 200px;

height: 50px;

line-height: 50px;

border: 1px solid red;

margin: 0 auto;

}

</style>

</head>

<body>

<div class="div1">

div垂直居中

</div>

</body>

</html>

运行结果：

0 0

爱淘宝红包返利

爱淘宝红包返利

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子坦克前线少女前线m nga少女前线前线兵造装备前线老山前线杨前线少女前线r 军团前线前线太平洋前线超越前线王国保卫战前线少女前线建造时间少女前线wiki 皇家守卫军前线中文版少女前线建造皇家守卫军2前线中文版堡垒前线破坏与创造末日前线兑换码王国保卫战前线破解版少女前线图片少女前线攻略王国保卫战前线英雄解锁末日前线哪些英雄重点培养二战前线模拟器二战前线2中文无敌版王国保卫战前线英雄解锁版王国保卫战2前线破解版少年前线2019必练枪潮流前线属于什么档次连云港渔乐前线俱乐部王国保卫战前线攻略火力前线破解版火力前线破解版无限金币钻石皇城突袭前线星球大战前线磁力前缀否定前缀前缀网盘前缀