Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >flex布局实现div的水平垂直居中

flex布局实现div的水平垂直居中

作者头像

全栈程序员站长

发布于 2022-08-31 08:12:51

发布于 2022-08-31 08:12:51

1.9K00

代码可运行

举报

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

代码如下：

<div class="outerContainer">
    <div class="innerContent"></div>
</div>

.outerContainer{ 
   
    width:100%;
    height:100%;
    background:#eee;
    display:flex;
    justify-content: center;
    align-items: center;
}
.innerContent{ 
   
    width:300px;
    height:300px;
    background: #fff;
    border:1px solid #ccc;
}

效果图：

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143096.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

flex布局以及实现垂直居中

https java 网络安全

给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效） flex:布局又叫伸缩布局，弹性布局，伸缩盒布局，flex布局 flex常见的父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap flex常见的子项属性 flex子项目占的分数 aglin-self控制子项目自己在侧轴的排列方式 order属性定义子项的排列顺序（前后顺序）

全栈程序员站长

2022/09/06

7900

如何实现水平垂直居中如何实现一个块级元素的水平垂直居中

absolute flex image table translate

详情查看https://www.runoob.com/w3cnote/flex- grammar.html

前端小tips

2021/11/27

1.2K0

如何实现水平垂直居中如何实现一个块级元素的水平垂直居中

flex垂直居中,水平居中和其他布局方式

https 网络安全 java

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/132066.html原文链接：https://javaforall.cn

全栈程序员站长

2022/06/30

5450

flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽[通俗易懂]

https java 网络安全

hahjdjjajdES6提供的Proxy可以让JS开发者很方便的使用代理模式，听说Vue

全栈程序员站长

2022/08/23

1.1K0

8种垂直居中的方法

https html java 网络安全 css

方法6 absolute+margin:auto 和方法5类似，当宽度和高度未知时使用

全栈程序员站长

2022/07/21

2440

CSS实现前端布局更巧妙的方案！在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

css 容器 flex 布局前端

justify-content 决定主轴（通常是水平方向）上子元素如何分配空间。常见的取值有：

空白诗

2024/09/13

2940

CSS实现前端布局更巧妙的方案！在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

flex布局垂直居中

https java 网络安全

外框高都为400px,边框为2px；圆的宽高为100px；中圆是水平居中；下圆是水平居中以及相对于中圆垂直居中（下圆到中圆的距离和下圆到下边框的距离相等）。效果如图：

全栈程序员站长

2022/07/01

5900

利用flex实现元素水平垂直居中[通俗易懂]

容器 java https 网络安全

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

全栈程序员站长

2022/06/26

13K0

利用flex实现元素水平垂直居中[通俗易懂]

CSS flex样式垂直居中

由于div默认是没有高度的，如果设置了高度，默认是从左到右，从上到下的顺序来排布；

全栈程序员站长

2022/08/11

1K0

水平垂直居中的六种方法

cell center flex position table

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

青梅煮码

2023/01/16

4150

实现div里的img图片水平垂直居中

https java 网络安全

方法一：将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

全栈程序员站长

2022/08/22

3.2K0

实现div里的img图片水平垂直居中

14种CSS实现水平或垂直居中的技巧

css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。

前端达人

2021/08/10

5890

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</title> <meta charset="utf-8"> </head> <style type="text/css"> .box { /* 在一个基础的盒子里面显示效果 */ position: relative; float: left; width: 250px; h

echobingo

2018/04/25

2.8K0

css3 flex布局的使用图片文字垂直居中排列图文混排垂直居中 display:flex「建议收藏」

容器 html css 编程算法 https

在实际工作的过程中经常遇到图片文字的混排，需要图片与一段文字垂直居中，这个实现方法以前一直非常复杂，而flex是解决这个问题比较好的办法；

全栈程序员站长

2022/06/27

3.8K0

css3 flex布局的使用图片文字垂直居中排列图文混排垂直居中 display:flex「建议收藏」

无固定高度的div垂直居中

1、无固定高度的div垂直居中 – CSS 实现效果图如下：代码附上： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes">

White feathe

2021/12/08

3.2K0

CSS实现垂直居中布局

首先将<html>与<body>的高度设置为100%（为演示父元素不定宽高的效果），并清除<body>的默认样式

WindRunnerMax

2020/08/27

1.9K0

前端主流布局方法

容器 flex grid 布局前端

请注意，本文编写于 153 天前，最后修改于 80 天前，其中某些信息可能已经过时。

曼亚灿

2023/05/18

2.2K0

flex垂直居中

java css flex 布局架构师

大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说flex垂直居中,希望能够帮助大家进步!!!

Java架构师必看

2022/01/11

8190

几种可以让元素水平垂直居中的方法

注：负margin是个非常有意思的用法，深入了解后会发现他在布局上相当有用。优点：代码量少，兼容性好。缺点：非响应式方法，内容可能会超出容器。

javascript艺术

2021/05/28

7010

几种可以让元素水平垂直居中的方法

CSS常用布局实现03-水平垂直居中

其实，水平居中和垂直居中都是水平垂直居中的一部分，所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中，那么居中的元素肯定是有宽度和高度的，要么是指定宽高，要么就是自适应的宽高。

love丁酥酥

2018/08/27

4150

CSS常用布局实现03-水平垂直居中

相关推荐

flex布局以及实现垂直居中

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验