居中效果展示
<div class="centerbox"></div>
*{
margin: 0;
padding: 0;
}
html,body {
height: 100vh;
}
.centerbox {
width: 100px;
height: 80px;
background: yellow;
position: absolute;/*绝对定位*/
left: 50%;/*距离左侧50%*/
top: 50%;/*距离顶部50%*/
margin-left: -50px;/*向左移动自身的50%*/
margin-top: -40px;/*向顶移动自身的50%*/
}
其中这两句：
margin-left: -50px;/*向左移动自身的50%*/
margin-top: -40px;/*向顶移动自身的50%*/
也可以换种写法，用transform向左和顶移动自身的50%，效果相同。
transform: translate(-50%,-50%);
/*定义2D转换，向左和顶移动自身的50%*/
代码展示： [html] [css] *{ margin: 0; padding: 0;} html,...
CSS 中，有几种经典的居中，水平居中，垂直居中。其中水平居中比较常见，也相对比较简单；垂直居中相对少见，但是也很...
CSS篇 垂直居中 方式一 方式二 方式三 方式四 方式五 方式六 水平居中 方式一 方式二 方式三 方式四 布局...
有一种姑娘是你给她画饼，然后两人真心实意的去相信；有一种姑娘是她给你画饼，然后让你心无杂念的沉浸在幸福里；有一种姑...
1、水平居中 如果是字体的话，最好的居中方式text-align: center 2、水平垂直居中 不知道容器的宽...
1.让元素水平垂直居中 文字水平垂直居中 2.让元素垂直居中 2.1 flex方式 2.2 position方式 ...
一. 目的： 知道在某种场景下该使用何种居中。 二. 内容 1. 简单的水平居中 1.1 text-align: ...
本章介绍几种常见的水平居中和垂直居中的实现方式
1. margin auto 与垂直居中 关于垂直居中的方式方式1：利用父元素position:relative和...
本文主要总结几种常见的CSS居中方式，下面我准备分为三个方向来写，分别是水平居中，垂直居中，水平垂直居中。水平居中...
本文标题：某种经典的居中方式
本文链接：https://www.haomeiwen.com/subject/qpigcxtx.html
网友评论