博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div内快元素[div,p。。。]居中办法
阅读量:7001 次
发布时间:2019-06-27

本文共 1495 字,大约阅读时间需要 4 分钟。

方法1:.parent {
width:800px; height:500px; border:2px solid #000; position:relative;} .child {
width:200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; 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; }

 

转载于:https://www.cnblogs.com/randyzhuwei/p/5136208.html

你可能感兴趣的文章
基于WinSvr2016(TP)构建的“超融合技术架构”进阶篇
查看>>
DHS:Blueprint for a Secure Cyber Future
查看>>
「诱人的Ruby」入门篇调查报告总结
查看>>
长短相形
查看>>
职场观察:高薪需要什么?
查看>>
IHS 问题分析
查看>>
企业创新系列之:青苹之末
查看>>
Windows Server 2012 R2 WSUS-10:流程概述
查看>>
Percona5.6首次提供了审计日志功能
查看>>
安装完 MySQL 后必须调整的 10 项配置
查看>>
Cobra怼比特大陆滥用算力要求改算法,吴忌寒:比特币或跌到10%下
查看>>
Windows Server 8 Beta 初体验之一:安装篇(无技术含量,安装过的人可以略过)
查看>>
05-Windows Server 2012 R2 会话远程桌面-标准部署-RD连接代理高可用性(RemoteApp)
查看>>
Silverlight Telerik控件学习:弹出窗口RadWindow
查看>>
Window.Show()和Window.ShowDialog()区别
查看>>
poj1742
查看>>
JavaScript计算两个文本框内数据的乘积(四舍五入保留两位小数)
查看>>
c++ extern c
查看>>
Asp.net :一个调试错误 Breakpoint will not currently be hit. No symbols loaded for this document....
查看>>
一个单表死锁的示例
查看>>