如何让div水平垂直居中
如何让div水平垂直居中
@(css)[妙瞳]
引子
我们经常遇到需要把div中的内容进行水平和垂直居中。所以,这里介绍一种方法,可以使div水平居中和垂直居中。
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div水平垂直居中</title><style>*{margin:0;padding:0;}div.box{background-color:pink;border:2px solid #000;width:960px;height:500px;margin-left:50px;}</style>
</head>
<body><div class="box"><img src="girl.jpg" alt="美女"></div>
</body>
</html>
效果图:
现在先让图片在div中水平居中
我们可以先给图片套一层盒子。
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div水平垂直居中</title><style type="text/css">*{margin:0;padding:0;}div.container{background-color:pink;border:2px solid #000;width:500px;height:500px;margin:50px auto;display:table; }div.wrapper{text-align:center;display:table-cell;vertical-align:middle;}div.wrapper img{border:1px solid #ddd;} </style>
</head>
<body><div class="container"><div class="wrapper"><img src="girl.jpg" alt="美女"/> </div></div>
</body>
</html>
IE8/Firefox/Chrome/Safari/Opera页面效果:
IE6/IE7页面效果:
由此可见要做IE6/IE7的兼容:
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div水平垂直居中</title><style type="text/css">*{margin:0;padding:0;}div.container{background-color:pink;border:2px solid #000;width:500px;height:500px;margin:0 auto;display:table;margin-top:20px;}div.wrapper{text-align:center;display:table-cell;vertical-align:middle;}div.wrapper img{border:1px solid #ddd;} </style><!--[if lte IE 7]><style type="text/css">div.container{position:relative;}div.wrapper{position:absolute;left:50%;top:50%;}div.wrapper img{position:relative;left:-50%;top:-50%;}</style><![endif]-->
</head>
<body><div class="container"><div class="wrapper"><img src="girl.jpg" alt="美女"/> </div></div>
</body>
</html>
IE6/IE7效果图:
综上所述,要让div里面的内容水平居中,可以使用text-align:center;
要实现垂直居中,container 的display:table;而wrapper的display:table-cell;同时vertical-align:middle;就可以实现div里的图片水平垂直居中。
假如是多张图片,要实现居中:
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div水平垂直居中</title><style>*{margin:0;padding:0;}div.container{background-color:pink;border:2px solid #000;width:700px;height:500px;margin:0 auto;margin-top:50px;}div.wrapper{text-align:center;margin-top:28px;}div.wrapper img{border:1px solid #ddd;width:200px;margin:10px;} </style>
</head>
<body><div class="container"><div class="wrapper"><img src="girl3.jpg" alt="美女"/> <img src="girl3.jpg" alt="美女"/><img src="girl3.jpg" alt="美女"/><img src="girl3.jpg" alt="美女"/><img src="girl3.jpg" alt="美女"/><img src="girl3.jpg" alt="美女"/></div></div>
</body>
</html>
IE6/IE7/IE8/Firefox/Chrome/Safari/Opera页面效果:
div.wrapper中的text-align:center;实现水平居中,margin-top:28px;实现垂直居中。
28px=[500-(200+1+1+10+10)*2]/2,即外层的高度减去里面的高度,然后除以2,设置margin-top,即可居中。
假如有错误或者建议的地方,欢迎指正!-----妙瞳。
转载于:https://www.cnblogs.com/WebShare-hilda/p/4743002.html
如何让div水平垂直居中相关推荐
- 关于DIV嵌套(二):div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
- 前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录 一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
- 让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- 如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中 第一个方法:我们使用定位给父元素positon:relative,定位到中间 div{ position:absolute; top: 50%; left: 50 ...
- div水平垂直居中的六种方法
在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现. 方法一: 绝对定位方法:不确定当前div的宽度和高度,采用 transform: ...
- css div水平垂直居中
2019独角兽企业重金招聘Python工程师标准>>> div水平居中对齐 使用margin-left:auto;margin-right:auto; .style{margin- ...
- 如何让一个div水平垂直居中
在工作中 经常会碰到让一个div框针对某个模块水平垂直居中 针对这种情况 有多种方法 现在一一实现一下 一. div绝对定位水平垂直居中 margin 负间距 代码: .box {width: 200 ...
- CSS如何让一个div水平垂直居中
大家好,我是新来的程序猿小清,在我们前端开发中,经常会让元素水平垂直居中的,现在我来给大家带来以下几种水平垂直居中的方法,如有不如,请谅解 <body><div class = &q ...
最新文章
- 图像处理中的Mask是什么
- String.format System.out.printf的用法-简单
- 【分布计算环境学习笔记】9 Web Service
- 这个黑科技小音箱,不用连蓝牙、一触即播
- 前目的地罗伯森是谁_距离目的地只剩10公里,开车师傅却在高速公路上睡着了...
- c语言乘法表 m*(9-i),C语言做九九乘法表.doc
- linux s t i a权限,关于Linux下s、t、i、a权限
- 一级计算机2016难度,2016年计算机等级一级考前必看
- (转)OpenStack Kilo 版本中 Neutron 的新变化
- 各代iphone尺寸_iPhone所有机型对比尺寸
- P6615 Kruskal + 构造
- 宇枫资本工薪族理财启发
- 台式机和计算机有什么区别,笔记本电脑和台式电脑有什么区别
- Leecode-动态规划专题训练
- 基于OTSU最大类间方差法的ROI分割、提取图像中的形状特征--面积、周长、离心率、zernike矩
- Node 笔记肆章 Express框架
- 英语练习32 Poor Amy
- 无器械健身和器械健身比较 1
- Linux 基于FTP协议文件传输系统
- Oracle 创建 DBLink 的方法 (Oracle12可以调用Oracle11的表)