记一上下左右居中的方法 -- transform

作者: liwuwuzhi | 来源:发表于2017-12-02 16:37 被阅读0次

fixed absolute 居中定位的两种方法
记一上下左右居中的方法 -- transform
元素div 上下左右居中方法总结
CSS居中小结
CSS实现一个标签上下左右居中的办法
文字与元素居中的方式
CSS居中方案介绍
day08
简易进度条（已封装）1、将div上下左右居中的方法 2、快速添加
杂

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
.parent{
    background: #bbb
}
.child{
    background: #eee;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
    width: 60%;
    height: 330px;
}

    </style>
</head>
<body>
    <div class="parent">
        <div class="child">aaaa</div>
    </div>
</body>
</html>

image.png

fixed absolute 居中定位的两种方法
一、使用transform进行居中 html部分上下左右居中左右居中上下居中二、使用margin进行居中(...
记一上下左右居中的方法 -- transform
元素div 上下左右居中方法总结
元素div 上下左右居中方法总结情景一：一个浏览器页面中，只有一个div模块，让其上下左右居中解决方案： { ...
CSS居中小结
下面是CSS居中的几种方法：水平居中元素：通用方法，元素的宽高未知方式一：CSS3 transform 方式...
CSS实现一个标签上下左右居中的办法
方法一：通过display：table布局代码如下：上下左右居中 body {...
文字与元素居中的方式
我们经常会让元素进行上下左右的居中，这里提供几种方法供大家使用我们经常会让元素进行上下左右的居中，这里提供几种方...
CSS居中方案介绍
1. 水平居中 1.1. transform居中通过transform居中的核心思想是让居中元素先通过margi...
day08
A我今天学到了什么垂直水平居中的3种方法 1.用transform垂直水平居中 2.用position水平居中 ...
简易进度条（已封装）1、将div上下左右居中的方法 2、快速添加
进度条 .container{ /*将div上下左右居中的方法*/ positio...
杂
一、垂直居中方法1：绝对定位 + 元素上下左右为0 + margin：auto方法2：table-cell方法3：...