1. 全栈程序员必看首页

div垂直居中的几种方式_div垂直水平居中

全栈程序员-站长 • • 未分类 • 阅读 60

div垂直居中的几种方式_div垂直水平居中利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-aligncenter，块级元素设置其本身的left和rightmargins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。Line-HeightMethod试用：单行文本垂直居中，demo代码：

大家好，又见面了，我是你们的朋友全栈君。

利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。

Line-Height Method

line height demo
试用：单行文本垂直居中，demo

代码：

html

1
2
3

<div id="parent">
<div id="child">Text here</div>
</div>

css

1
2
3

#child {
        
        
line-height: 200px;
}

垂直居中一张图片，代码如下

html

1
2
3

<div id="parent">
<img src="image.png" alt="" />
</div>

css

1
2
3
4
5
6

#parent {
        
        
line-height: 200px;
}
#parent img {
        
        
vertical-align: middle;
}

CSS Table Method

table cell demo

适用：通用，demo

代码：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5

#parent {
        
        display: table;}
#child {
        
        
display: table-cell;
vertical-align: middle;
}

低版本 IE fix bug：

1
2
3

#child {
        
        
display: inline-block;
}

Absolute Positioning and Negative Margin

absolute positioning and negative margin demo

适用：块级元素，demo

代码：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9

#parent {
        
        position: relative;}
#child {
        
        
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

Absolute Positioning and Stretching

absolute positioning and vertical stretching demo

适用：通用，但在IE版本低于7时不能正常工作，demo

代码：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11

#parent {
        
        position: relative;}
#child {
        
        
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}

Equal Top and Bottom Padding

vertical centering with padding demo

适用：通用，demo

代码：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6

#parent {
        
        
padding: 5% 0;
}
#child {
        
        
padding: 10% 0;
}

Floater Div

vertical centering with floater div demo

适用：通用，demo

代码：

html

1
2
3
4

<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11

#parent {
        
        height: 250px;}
#floater {
        
        
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
        
        
clear: both;
height: 100px;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/124702.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 解决网页上内容不能复制的几种方法是什么_强制复制网页文字

    解决网页上内容不能复制的几种方法是什么_强制复制网页文字

    解决网页上内容不能复制的几种方法是什么_强制复制网页文字前言现在有很多网站不登陆或者不是会员不能复制内容，现在教大家几种方法来突破这个限制。通过快捷键ctrl+pctrl+p是打印的快捷键，一般的限制都可以通过这个方式来复制document.designModeF12/右键->检查，打开浏览控制台切换到console面板输入document.designMode=’on’document.body.contentEditableF12/右键->检查，打开浏览控制台切换到console面板输入document.bod

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月19日
    3
  • Android名词解释_古代汉语名词解释汇总 名词解释

    Android名词解释_古代汉语名词解释汇总

    Android名词解释_古代汉语名词解释汇总什么叫刷机刷机，是手机方面的专业术语，是指通过一定的方法更改或替换了手机原版系统中固有的一些语言、图片、铃声和软件版本或者操作系统，可以使手机功能更加完善。刷机可以是官方的，也可以是非官方的。再简单点说，刷机就是一种改变你手机操作系统的一种行为，就相当于给电脑装上不同版本的windows或则电脑重装系统，也就是刷手机的操作系统吧。目前常说的刷机就是用“更改替换了一些图片、铃声或菜单后的软件

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月10日
    8
  • Quartz与Spring集成—— SchedulerFactoryBean的初始化分析「建议收藏」

    Quartz与Spring集成—— SchedulerFactoryBean的初始化分析「建议收藏」

    Quartz与Spring集成—— SchedulerFactoryBean的初始化分析「建议收藏」Quartz是一个开源的定时调度框架，支持集群部署。我们可以通过其JavaAPI来使用它，或者通过Spring来配置与管理，也可以结合使用两种方式。本文重点分析Quartz与Spring集成时的初始化过程。

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月24日
    111
  • java.nio.heapbytebuffer_javastringbuffer和string区别

    java.nio.heapbytebuffer_javastringbuffer和string区别

    java.nio.heapbytebuffer_javastringbuffer和string区别文章目录简介初始化向ByteBuffer写数据手动写入数据从SocketChannel中读入数据至ByteBuffer从ByteBuffer中读数据复位position读取数据字节序处理简介在Java的Socket编程中，若使用阻塞式（BIO），则往往通过ServerSocket的accept()方法获取到客户端Socket之后，再使用客户端Socket的InputStream和OutputS…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月3日
    2
  • Facebook 秘钥散列

    Facebook 秘钥散列

    Facebook 秘钥散列先下载OpenSSL工具执行这个命令keytool-exportcert-aliasandroiddebugkey-keystoredebug.keystore>c:\openssl\bin\debug.txt其中androiddebugkey是你xxx.keystore文件的路径，debug是你.keystore文件的名字然后路径cd到openssl文件夹下的bin目录执行opensslsha1-binarydebug.txt>debug_sha.t

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月15日
    43
  • <span>【转载】怎样理解阻塞非阻塞与同步异步的区别？</span>

    【转载】怎样理解阻塞非阻塞与同步异步的区别？

    【转载】怎样理解阻塞非阻塞与同步异步的区别？

    全栈程序员-站长的头像 全栈程序员-站长
    2021年11月18日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号