[分享]css元素内垂直居中显示

在网页设计中，垂直居中显示是一个常见的需求，特别是在设计菜单、按钮等元素时，经常需要使它们在父元素内垂直居中。在CSS中，实现元素内垂直居中显示的方法有多种，下面将介绍其中两种：1. 使用tablec...

在网页设计中，垂直居中显示是一个常见的需求，特别是在设计菜单、按钮等元素时，经常需要使它们在父元素内垂直居中。

在CSS中，实现元素内垂直居中显示的方法有多种，下面将介绍其中两种：

1. 使用table-cell和vertical-align属性

       .parent {
           display: table;
           height: 300px;
       }

       .child {
           display: table-cell;
           vertical-align: middle;
       }

   这里的parent是父元素，child是子元素。将父元素的display属性设置为table，将子元素的display属性设置为table-cell，再将子元素的vertical-align属性设置为middle，即可实现垂直居中显示。

2. 使用flexbox布局

       .parent {
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
       }

       .child {
           width: 100px;
           height: 100px;
       }

   这里的parent也是父元素，child是子元素。将父元素的display属性设置为flex，然后使用justify-content和align-items属性设置子元素的水平和垂直居中，即可实现垂直居中显示。需要注意的是使用flexbox布局需要浏览器支持，需要考虑兼容性。 

总的来说，CSS提供了多种方法实现元素内垂直居中显示，在实际使用中可以根据不同的需求选择合适的方法进行实现。