CSS实现水平垂直居中方式
1、定位
核心代码实现请看示例代码中的注释：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>CSS水平垂直居中实现方式--定位实现</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.p{
/*父元素为除了static以外的定位方式*/
position: relative;
/*position: absolute;*/
/*position: fixed;*/
width: 500px;
height: 500px;
border: 1px solid red;
}
.c{
/*子元素为绝对定位*/
position: absolute;
width: 200px;
height: 200px;
/*top、bottom、left和right 均设置为0*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin设置为auto*/
margin:auto;
border: 1px solid green;
}
</style>
</head> <body>
<div class="p">
<div class="c">
子元素
</div>
</div> </body> </html>
效果：
2、table-cell布局
核心代码实现请看示例代码中的注释：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>CSS水平垂直居中实现方式--定位实现</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.p{
width: 500px;
height: 500px;
border: 1px solid red;
display: table-cell;
/*vertical-align: middle; 实现垂直居中*/
vertical-align: middle;
}
.c{
width: 200px;
height: 200px;
border: 1px solid green;
/*margin: 0 auto; 实现水平居中*/
margin: 0 auto;
}
</style>
</head> <body>
<div class="p">
<div class="c">
子元素
</div>
</div> </body> </html>
效果同上。
3、flex布局
核心代码实现请看示例代码中的注释：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>CSS水平垂直居中实现方式--定位实现</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .p {
width: 500px;
height: 500px;
border: 1px solid red;
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
} .c {
width: 200px;
height: 200px;
border: 1px solid green;
}
</style>
</head> <body>
<div class="p">
<div class="c">
子元素
</div>
</div> </body> </html>
效果同上，注意浏览器兼容性问题。
4、translate+relative定位
核心代码实现请看示例代码中的注释：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>CSS水平垂直居中实现方式--定位实现</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .p {
width: 500px;
height: 500px;
border: 1px solid red;
} .c {
width: 200px;
height: 200px;
border: 1px solid green;
/*relative 定位*/
position: relative;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);
}
</style>
</head> <body>
<div class="p">
<div class="c">
子元素
</div>
</div> </body> </html>
效果同上，注意浏览器兼容性问题。
CSS实现水平垂直居中方式的更多相关文章
- css之水平垂直居中方式
布局中常用到的水平垂直居中问题 作为一个前端开发人员,布局是我们日常工作中解除最多的,而水平垂直居中也必不可少的出现,面试中也经常遇到噢- 一.position:absolute(固定宽高) widt ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- 你知道CSS实现水平垂直居中的第10种方式吗？
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- css实现水平垂直居中的几种方式
梳理下平时常用css水平垂直居中方式- 使用flex布局 HTML <div class="box"> <div class="child"& ...
- CSS实现水平垂直居中的方式有哪些？
CSS实现水平垂直居中的方式有哪些? 基本结构样式: .box { width: 400px; height: 400px; background-color: red; } .inner { wid ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- css实现水平 垂直居中
css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...
随机推荐
- py2exe使用方法 (含一些调试技巧，如压缩email 类)(转)
一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...
- Polly简介 — 1. 故障处理策略
Polly 是 .Net 下的一套瞬时故障处理及恢复的函式库,可让开发者以fluent及线程安全的方式来应用诸如Retry.Circuit Breaker.Timeout.Bulkhead Isola ...
- C 常量的类型
http://bbs.csdn.net/topics/380028485 整型常量的类型是下列相应表中第一个能表示其值的类型: int --> long int --> long long ...
- WaitForSingleObject和CEvent用法
WaitForSingleObject函数用来检测hHandle事件的信号状态,当函数的执行时间超过dwMilliseconds就返回,但如果参数dwMilliseconds为INFINITE时函数将 ...
- C#子类如何调用父类
C#中子类是如何调用父类的?带着这个问题,体验如下: □ 通过子类无参构造函数创建子类实例 创建父类Person和子类Student. public class Person { public Per ...
- NativeXml
NativeXml GITHUB: https://github.com/kattunga/NativeXml THIS IS A FORK WITH SOME FIXES AND IMPROVEME ...
- [翻译] FreeStreamer 在线流媒体播放
FreeStreamer https://github.com/muhku/FreeStreamer Introduction FreeStreamer is an audio player engi ...
- my.cnf 配置文件参数解释
my.cnf 配置文件参数解释: #*** client options 相关选项 ***# #以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容.如果你 ...
- sql的嵌套查询，把一次查询的结果做为表继续进一步查询；内联视图
Mysql的嵌套表查询 嵌套SELECT语句也叫子查询,一个 SELECT 语句的查询结果能够作为另一个语句的输入值.子查询可以: 出现在Where子句中, 出现在from子句中,作为一个临时表使用, ...
- OpenCV 脸部跟踪(1)
本文中的知识来自于Mastering opencv with practical computer vision project一书. 本文实施的脸部跟踪算法都是基于数据驱动的,主要 ...