如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html
方法1:
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
position: relative;
} .child {
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top:;
left:;
bottom:;
right:;
background-color: red;
}
方法2:
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
} .child {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
方法3:
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
display: flex;
justify-content: center;
align-items: center;
} .child {
width: 200px;
height: 200px;
background-color: red;
}
方法4:
.parent {
width: 800px;
height: 500px;
border: 2px solid #000;
position: relative;
} .child {
width: 300px;
height: 200px;
margin: auto;
position: absolute; /*设定水平和垂直偏移父元素的50%,再根据实际长度将子元素上左挪回一半大小*/
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
background-color: red;
}
如何让一个div水平和垂直居中对齐的更多相关文章
- 关于页面布局中,如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- 【转】如何让DIV水平和垂直居中
来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...
- DIV水平和垂直居中的实现
在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...
- CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
- 使当前对象相对于上层DIV 水平、垂直居中定位
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- CSS3 div水平、垂直居中,IE9以上、Firefox、Chrome均正常
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 如何让一个DIV水平,垂直方向都居中于浏览器?
<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...
随机推荐
- python 下载大文件
当使用requests的get下载大文件/数据时,建议使用使用stream模式. 当把get函数的stream参数设置成False时,它会立即开始下载文件并放到内存中,如果文件过大,有可能导致内存不足 ...
- 封装微信小程序支付
<?php /** * User: Eden * Date: 2019/3/21 * 共有内容 */ namespace Common\Service; use Think\Exception; ...
- php CLI SAPI 内置Web Server
PHP 5.4.0起, CLI SAPI 提供了一个内置的Web服务器. 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作目录(Working ...
- [转][osg][QT]osg与QT界面结合的简单例子
//QT += core gui opengl //LIBS += -losgViewer -losgDB -losgUtil -losg -lOpenThreads -losgGA -losgQt ...
- EasyUI datebox 设置不可编辑后再次修改为可编辑失效的解决
工作中遇到的问题,折腾了好久: 如下图: 需求:当状态发生改变后,如果状态是未核实 , 核实人 核实时间 核实结果 核实说明 均为不可编辑状态 具体js代码如下: //状态改变 $('#js ...
- 生成更大的陆地 Making A Large Island
2018-10-06 19:44:18 问题描述: 问题求解: 经典的求连通块问题的扩展,问题规模不大,可以暴力求解. 解法一.Brute Force O(n^4) int[][] dirs = ne ...
- makefile 里的 := , = , +=
:= 是在这行代码的时候,直接展开右边的变量. = 是在最终左边变量被使用的时候,才把右边的变量展开. https://stackoverflow.com/questions/10227598/wha ...
- vs2013安装及opencv3.0的配置
vs2013的安装改善计划,不勾选. Windows8 和 windows phone不勾选 然后进行解压安装.(我安装在了e盘的次级目录) 安装完成,点击“启动” 登陆界面,点击“以后再说”. ...
- Java中的参数传递 --Java
1.基本类型传值,对象类型传地址 按值传递:当将一个参数传递给一个方法时,方法接收的是原始值的一个副本.因此,如果方法修改了该参数,仅改变副本,而原始值保持不变. 按引用传递:当将一个参数传递给一个方 ...
- Confluence 6 删除一个空间
删除一个空间将会完全删除空间和空间的所有内容,包括有关这个空间的所有日历,和链接到这个空间中的问题.只有具有空间管理员权限的用户才能够完全删除一个空间. 删除空间是完全从系统中删除的.一旦你删除了一 ...