How to center button in div in css-CSS Tutorial-php.cn

How to center button in div in css

WBOY

Release： 2021-12-03 18:18:56

Original

10275 people have browsed it

Method: 1. Add the "display:flex" style to the div element and set the div element to a flexible layout style; 2. Add the "align-items:center;justify-content:center" style to the div element. Just set the button element within the div to be centered horizontally and vertically.

How to center button in div in css

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to center the button in the div in css

We can set the div element to a flexible layout through the display:flex; attribute, which is used to The div element provides the most flexibility.

align-items property defines the alignment of flex items in the direction of the cross axis (vertical axis) of the current row of the flex container.

justify-content is used to set or retrieve the alignment of the flexible box element in the main axis (horizontal axis) direction.

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width:200px;
        height:200px;
        border:1px solid #000;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    </style>
</head>
<body>
    <div><button>按钮</button></div>
</body>
</html>

Copy after login

Output result:

How to center button in div in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to center button in div in css. For more information, please follow other related articles on the PHP Chinese website!