当前位置:首页 > 技术分析 > 正文内容

css常用水平垂直居中方法(css中垂直水平居中的方式有哪些)

ruisui883个月前 (01-22)技术分析12

以下列举三种使元素水平垂直居中方法

一、利用vertical-align,text-align,inline-block实现

html:

//html
<div class="p">
  <div class="c">
   水平垂直居中
  </div>
 </div>

css:

效果如下:

二、用在移动端 ie11 chrome:利用flex实现

html:

<div class="p1">
  <div class="c1">
   水平垂直居中
  </div>
</div>

css:

效果如下:

三、利用绝对定位实现

html:

<div class="p2">
  <div class="c2">
   水平垂直居中
  </div>
 </div>

css:

效果如下:

.p2 {
 position: relative;
 width: 200px;
 height: 80px;
 background: orange;
 }
.c2 {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -80px;
 margin-top: -15px;
 /*用在移动端*/
 /*transform: translate(-50%,-50%);*/
 width: 160px;
 height: 30px;
 background: #EFEFF4;
 }

还有其他方法等待探索。。。。。。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/460.html

分享给朋友:

“css常用水平垂直居中方法(css中垂直水平居中的方式有哪些)” 的相关文章

总结了Vue3的七种组件通信方式,别再说不会组件通信了

写在前面本篇文章是全部采用的<script setup>这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式:propsemitv-modelrefsprovide/injecteventBusv...

java调用API操作GitLab

最近需要在一个WEB项目中集成GitLab,用到了GitLab的API操作,在网上找了很久都是说直接调用GitLab的Http接口,而且API官方只有javadoc没有其它说明文档,特别记录下,以备查询。这里采用Token的认证方式,因此需要先登陆GitLab新建一个Token,创建方式如下:创建完...

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

前后端分离自动化运维平台开发

运维平台采用前后端分离:前端vue,框架vue-element-admin;后端python,框架django-rest-framework.目前运维平台模块如下:1、 CMDB管理应用管理、环境管理、开发语言管理、产品项目管理、资产管理2、 构建发布持续构建、持续部署、Jar工程依赖构建3、 容器...

面试被逼疯:聊聊Python Import System?

面试官一个小时逼疯面试者:聊聊Python Import System?对于每一位Python开发者来说,import这个关键字是再熟悉不过了,无论是我们引用官方库还是三方库,都可以通过import xxx的形式来导入。可能很多人认为这只是Python的一个最基础的常识之一,似乎没有可以扩展的点了,...

国产操作系统上Vim的详解03--安装和使用插件 | 统信 | 麒麟 | 中科方德

原文链接:国产操作系统上Vim的详解03--使用Vundle插件管理器来安装和使用插件 | 统信 | 麒麟 | 中科方德Hello,大家好啊!今天给大家带来一篇在国产操作系统上使用Vundle插件管理器来安装和使用Vim插件的详解文章。Vundle是Vim的一款强大的插件管理器,可以帮助我们轻松地安...