水平居中和transform: translateY(-50%) 实现元素垂直居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .center {
        width: 960px;
        height: 500px;
        margin: 0 auto;
        background: #1879D9;
    }

    .center p {
        background: #fff;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="center">
        <p>垂直居中内容</p>
    </div>
</body>
</html>

　　效果如图：

时间： 2024-11-10 07:05:16

水平居中和transform: translateY(-50%) 实现元素垂直居中效果的相关文章

transform: translateY(-50%) 实现元素垂直居中效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .center { 8 height: 500px; 9 background:#888; 10 } 11 .center p{ 12 background: #faf

CSS代码使任何元素垂直居中

方法一:.element { position: relative; top: 50%; transform: translateY(-50%);} 方法二: HTML: <body> <div class="a1"><div class="a2"></div></div></body> css:.a1{width: 100%;height: 500px;display: table-ce

transform:translate(-50%,-50%)实现水平垂直居中

translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.. 当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置 translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置. 与负margin-left和margin-top实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate()函数中

div盒子水平居垂直中的几种方法

div盒子水平居垂直中的几种方法<!DOCTYPE html><html> <head> <mete charset="utf-8"/> <style> *{ margin: 0; padding: 0; } /*方案1.使用transforms属性的translate

div垂直居中和3个div

一.垂直居中 1.利用margin *{margin:0; padding:0; position:relative;} .div1{width:400px; height:400px; background:#f00;margin:20px auto; overflow:hidden;} .div2{width:200px; height:200px; margin:100px 0 0 100px; background:#0f0;} 2.绝对定位 *{margin:0; padding:0;

position left50% transition：translate(-50%) 未指定元素的宽度内容挤下问题

没有指定长度width的情况使用position:absolute left:50% transform:translateX(-50%) bug:当文字宽度超过屏幕一般以上的时候,文字会被挤下. 原始代码: <div class="tips">让身边的 “Ta” 们更了解你的货车生活</div> .tips{ position: absolute; bottom: 20.4rem; left:50%; transform: translateX(-50%);

元素垂直居中方法总结

以下总结了一些常见的元素垂直居中方法: 首先,基本的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> &

元素垂直居中

下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素,利用vertical-align:middle来实现垂直居中,利用父元素的text-align:center;实现水平居中. 一.表格方法表格本来对立面的内容是垂直居中的,所以用表格来做很适合.但是它里面的内容是行内元素才行,所以下面的代码就可以实现. *{margin:0px; padding:0px;}table {position:absolute; width:100%; height:100%; t

用 CSS 实现元素垂直居中

作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/275464838来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 说明 .center表示要被居中的元素,.wrap 表示要居中的元素的父元素(包含.center元素的元素). 为了便于理解和叙述同一: 对于文本内容居中的情况,.wrap就是指包含文字的元素(例如<i>文字</i> ,i标签就是.wrap ). 文本内容会在外部创建一个行