前端笔记之Div居中显示

1、水平居中：给div设置一个宽度，然后添加margin:0 auto属性

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>W3Cschool</title><style type="text/css">div{width: 300px;height: 300px;background-color: #000;}#div1{width: 200px;margin: 0 auto;background-color: #f40;}</style>
</head>
<body><div><div id="div1"></div></div>
</body>
</html>

2、水平垂直居中一

确定容器的宽高宽200 高 100 的层
设置层的外边距

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>W3Cschool</title><style type="text/css">div{position: relative;width: 300px;height: 300px;background-color: #000;}#div1{position: absolute;     /* 相对定位或绝对定位均可 */width:200px; height:100px;top: 50%;left: 50%;margin: -50px 0 0 -100px;      /* 外边距为自身宽高的一半 */background-color: #f40;     /* 方便看效果 */}</style>
</head>
<body><div><div id="div1"></div></div>
</body>
</html>

3、水平垂直居中二

未知容器的宽高，利用 transform 属性

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>W3Cschool</title><style type="text/css">div{position: relative;width: 300px;height: 300px;background-color: #000;}#div1{position: absolute;     /* 相对定位或绝对定位均可 */width:200px; height:100px;top: 50%;left: 50%;transform: translate(-50%, -50%); background-color: #f40;     /* 方便看效果 */}</style>
</head>
<body><div><div id="div1"></div></div>
</body>
</html>

4、水平垂直居中三

利用 flex 布局
实际使用时应考虑兼容性

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>W3Cschool</title><style type="text/css">div{width: 300px;height: 300px;display: flex; align-items: center;        /* 垂直居中 */justify-content: center;    /* 水平居中 */background-color: #000;}#div1{width:200px; height:100px;background-color: #f40;     /* 方便看效果 */}</style>
</head>
<body><div><div id="div1"></div></div>
</body>
</html>

前端笔记之Div居中显示相关推荐

设置div中的div居中显示
设置div中的div居中显示方法一. <div class='big'><div class='small'>box1</div></div>styl ...
如何使一个 div 居中显示
在 chrome 或 FireFox里,使用 body{ margin:0px; padding:0px; } div{ magin:0 auto; } 即可让一个 div 居中显示,但在 IE 里不 ...
H5 div 居中显示
H5 div 居中显示文章目录 H5 div 居中显示推荐:[浏览器同步测试工具](http://www.browsersync.cn/#install) H5 引入外部CSS文件 div居中显示 ...
使一个div居中显示的三种方法
使一个div居中显示的三种方法 1. <!DOCTYPE html> <html lang="en"> <head><meta chars ...
关于div居中显示的问题
关于div居中显示的问题要想设置div居中显示,只需要设置margin-right:auto 和 margin-left:auto 切记,这种方法不能设置浮动,也就是float属性.否则,达不到预 ...
使用css代码实现div居中显示 div水平居中显示
使用css代码实现div居中显示 div水平居中显示属性居中显示属性需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为**margin:0 auto: ...
利用transform：translate使div居中显示
利用transform:translate使div居中显示之前一直在用这个属性让某个div居中显示,但是一直有一个困惑,我想同时让水平和垂直都居中,可是水平方向总会有一点偏差,看一下以前怎么写的. ...
使用css使div居中显示
本例以vue为例,使用text-align: center 和margin:0 auto;实现div居中显示 1.html代码 <template> <div class=&qu ...
两个div并排显示 div居中显示
div并排显示的两种方法 float:left display: inline-block; div居中显示.文字居中显示 text-align: center;margin: 0 auto

前端笔记之Div居中显示

前端笔记之Div居中显示

1、水平居中：给div设置一个宽度，然后添加margin:0 auto属性

2、水平垂直居中一

3、水平垂直居中二

4、水平垂直居中三

前端笔记之Div居中显示相关推荐

最新文章

热门文章