html元素水平居中、垂直居中、-水平垂直居中于其父级元素的方法

2020-03-24 15:51:23

字体：大中小

来源：转载

供稿：网友

html元素水平居中于其父级元素的方法：

方法1：

代码如下:

<div class="wrap">

<div class="left-right-middle1">左右居中方法1</div>

</div>

代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.left-right-middle1{

width:200px;

background-color:#69F;

margin:0 auto;

}

方法2：

代码如下:

<div class="wrap">

<div class="left-right-middle2">左右居中方法2</div>

</div>

代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.left-right-middle2{

width:200px;

background-color:#69F;

left:50%;

margin-left:-100px;

}

html元素垂直居中于其父级元素的方法：

代码如下:

<div class="wrap">

<div class="top-bottom-middle">上下居中</div>

</div>

代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.top-bottom-middle{

height:200px;

background-color:#69F;

top:50%;

margin-top:-100px;

}

html元素水平垂直居中于其父级元素的方法：

方法1：

代码如下:

<div class="wrap">

<div class="

爆笑图片大全[www.62-6.com/1/baoxiaotupian];all-middle1">上下左右居中方法1</div>

</div>
代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.all-middle1{

width:200px;

height:200px;

background-color:#69F;

top:50%;

margin:-100px auto 0;

}

方法2：
代码如下:

<div class="wrap">

<div class="all-middle2">上下左右居中方法2</div>

</div>

代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.all-middle2{

width:200px;

height:200px;

background-color:#69F;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

}

完整代码：
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：开发者必须知道的HTML5十五大新特性

下一篇：HTML5 video标签的播放控制

发表评论 共有条评论

用户名: 密码:

验证码: 匿名发表

学习交流

更多

MBR怎么转换为GPT？硬盘MBR格式

威刚发布新一代Ultimate SU900

MBR怎么转换为GPT？硬盘MBR格式转换成GPT格
MBR怎么转换为GPT？硬盘MBR格式转换成GPT格式教程...

快剪辑自带水印可以消除，只需简单设置12-24

飞鸽传书好友列表显示异常？或许是这两个原因12-24

下载网页中视频的方法~~12-24

教你用拼音打出来不认识的字~~12-24

Nginx服务器上安装并配置PHPMyAdmin的教程03-22

Mac配置虚拟主机详细过程03-22

关于集群、分布式和负载均衡的区别有哪些？（03-22

phpMyAdmin4.4.10安装03-22

phpmyadmin导入数据最大限制2048KB的解决方03-22

热门图片

更多

校园甜美的背影，洋溢着青春烂漫的回忆

芭蕾舞蹈表演，真实美到极致

春天的魅力：绿杨烟外晓寒轻

春节临近，各地春节彩灯高高挂

肉食主义者的最爱美食烤肉图片

夏日甜心草莓美食图片

人逢知己千杯少，喝酒搞笑图集

搞笑试卷，学生恶搞答题

猜你喜欢的新闻

陌陌成立文化传播新公司联合创始人雷小亮

美团云5月31日起停止对用户服务

中国移动2019年净利润1066亿元超出预期

国内油价重回“5元时代” 92号汽油每升下调

腾讯在天津成立新公司斥资2亿元人民币

软银集团或放弃收购WeWork 30亿美元收购要

全球十大IC设计公司最新排名

光刻机霸主阿斯麦(ASML)：控制芯片产业链上游

博通状告Netflix侵犯专利：电视没人看，我们受

比尔·盖茨退出公司董事会将继续担任公司

猜你喜欢的关注

html5 自定义播放器核心代码

html style标签是什么意思？关于style标签的

html在鼠标按钮在元素上按下时触发的事件属

html如何给table表单加边框

html5 viewport使用方法示例详解

HTML对于元素水平垂直居中的探讨

html form标签name属性怎么用？form标签的nam

HTML5 canvas基本绘图之绘制线段

XHTML：两种语言的力量

html中空格字符实体的详细介绍