为什么我的加载微调器不是集中式引导程序4

Question

我试图实现一个带有bootstrap4的web应用程序并做出反应。我有一个加载微调器，如下所示：

我希望这个加载微调器位于页面的中间而不是左上角。当前的DOM结构如下：

<div>
                    <NavBar clickHandler={(ticker) => this.handleSearchClick(ticker)} tickers={ftse100Tickers.tickers}/>
                    <div className="container-fluid">
                        <div className="row">
                            <NavBarSide clickHandler={(url) => this.handleNavClick(url)}/>
                            <div className="col-md-9 ml-sm-auto col-lg-10 pt-2 px-3">
                                <div className="container d-flex h-100">
                                    <svg id="svgspin" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 16 16">
                                        <path d="m8 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8m4.88 9.21c-.57 2.23-2.58 3.79-4.88 3.79s-4.31-1.56-4.88-3.79c-.1-.38.13-.76.51-.86.06-.02.12-.02.18-.02.32 0 .6.22.68.53.41 1.61 1.86 2.73 3.52 2.73s3.1-1.12 3.52-2.73c.08-.31.36-.53.68-.53.06 0 .12.001.18.02.18.05.34.16.43.33s.12.35.07.54"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

我是否需要在行类中添加对齐中心？或者在内部容器上添加对齐？

NavBarSide简单地说：

<Nav className="col-md-2 d-none d-md-block bg-light sidebar">
                <div className="sidebar-sticky">
                    <ul className="nav flex-column">
                        <Dropdown nav isOpen={this.state.dropdownError} toggle={this.toggleError}>
                            <DropdownToggle nav caret>Error</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/highest/error")}>Highest</DropdownItem>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/lowest/error")}>Lowest</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <Dropdown nav isOpen={this.state.dropdownPrice} toggle={this.togglePrice}>
                            <DropdownToggle nav caret>Price</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/highest/price")}>Highest</DropdownItem>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/lowest/price")}>Lowest</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <Dropdown nav isOpen={this.state.dropdownVolume} toggle={this.toggleVolume}>
                            <DropdownToggle nav caret>Volume</DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/highest/volume")}>Highest</DropdownItem>
                                <DropdownItem href="#" onClick={() => this.props.clickHandler("/api/lowest/volume")}>Lowest</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </ul>
                </div>
            </Nav>

Answer 1

你可以用css

来居中

#svgspin{
  width:150px;
  margin:0 auto;
}