让浮动的元素垂直居中

若已知父元素的宽高,设置相对定位

子元素若高度300px,设置绝对定位,top:50% margin-top:-150px(子元素高度的一半);

<div class="a">
    <div class="b">
        元素居中
    </div>
</div>
.a{
    width:800px;
    height:600px;
    position:relative;
    background:black;
}
.b{
    width: 500px;
    height: 300px;
    margin-top:-150px;
    position: absolute;

    top: 50%;
    background-color: white;
    float:left;
}
时间: 2024-10-06 23:57:21

让浮动的元素垂直居中的相关文章

如何让设置浮动的元素垂直居中

浮动元素垂直居中: 1.核心代码: vertical-align: middle;display: table-cell;代码实现如下 <style type="text/css"> #demo { width: 300px; height: 200px; background-color: grey; display: table-cell; vertical-align: middle; } .fl { float: left; width: 50px; height:

让浮动元素垂直居中

让容器中设置为浮动的元素垂直居中: 在父元素上进行设置: <style type="text/css"> #demo { width: 300px; height: 200px; background-color: grey; display: table-cell; vertical-align: middle; } .fl { float: left; width: 50px; height: 50px; background-color: black; } </

关于浮动元素垂直居中的问题

两种浮动元素垂直居中的情况: 父盒子有宽高; 父盒子没有宽高下面时 HTML 中的代码: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>浮动元素垂直居中</title> 6 </head> 7 <body> 8 <div class="pare

css元素垂直居中

一.css元素垂直居中初始状态 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css元素垂直居中</title> <style type="text/css"> .wrapper{ background-color: #f24444; width:200px; height:

元素垂直居中方法总结

以下总结了一些常见的元素垂直居中方法: 首先,基本的html和CSS为 #wrap{ width: 320px; height: 160px; background: red; } #wrap>div{ width: 50px; height: 50px; background: black; color: #fff; } <div id="wrap"> <div class="v-center">我是前端狗</div> &

居中div,居中浮动的元素

定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法 这个也可以是定位法.用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto. display:table-cell法 这个方法主要针对多行文字内

css1—八种方式实现元素垂直居中

这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变的,只要将“line-height”和“height”设置成一样的就可以了.这种方式局限性在于只有单行文本的元素才适用,多行元素是不适用的. html代码: <div class="vertical"> <span>aaa</span>content &

CSS布局:元素垂直居中

CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握各种方法能够实现居中的原理.只要掌握了原理,那么不管问题怎么变都可以根据自己的理解选择合适的方法. 一.使用line-height 1.原理 ? 有行高的元素,内容会默认显示在行高的垂直中心处,通过设置行高等于父元素的高度,可以达到内容在父元素中垂直居中的效果 2.实现步骤 (1)父元素有一个确定的

实现元素垂直居中的方法(补充)

之前发过一次<实现元素垂直居中的方法>的文章,今天又碰到了更简便的方法,就是利用transform属性,特别是当要居中的元素宽度,高度未知时非常好使,废话不多说,直接上demo: <!DOCTYPE html><html><head lang="zh-cn">    <meta charset="UTF-8">    <title>居中的方法</title>    <style